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

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>

>Solution :

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;
}