Question 11199 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change html div style z-index value using JavaScript/css – Jquery

I want to replace all z-index < 0 value to 0 where role="columnheader". How can I achieved this using javascript or css.

Current output

<div role="columnheader" style="z-index: 1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18120px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18180px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: -1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18240px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: -2; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18300px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

Expected Result

<div role="columnheader" style="z-index: 1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18120px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18180px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18240px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role="columnheader" style="z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18300px;" class="jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>
Tags:

2

Answers


  1. 0

    Use attribute selector and and conditionally change z-index in a loop:

    const elements = document.querySelectorAll('[role="columnheader"]');
    elements.forEach((el) => {
      if (parseInt(el.style.zIndex) < 0) {
        el.style.zIndex = 0;
      }
    });

    or you can use attribute selectors in css like this :

    [role="columnheader"][style*="z-index"][style*="-"] {
  z-index: 0!important;
}
    Login or Signup to reply.
  2. 0

    You can query all elements using querySelectorAll command then apply z-index for each element inside a forEach loop

        document.querySelectorAll('[role="columnheader"]').forEach(function (el){
      if(el.style.zIndex < 0) {
        el.style.zIndex = 0;
      }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search