如何通过JavaScript/CSS将role为columnheader的z-index负值替换为0

JavaScript 实现（精确满足需求） #

通过JavaScript可以精准筛选并修改符合条件的元素，保留原有z-index≥0的值，仅将负值替换为0：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 选择所有role属性为columnheader的div元素
  const columnHeaders = document.querySelectorAll('div[role="columnheader"]');
  
  // 遍历处理每个元素
  columnHeaders.forEach(header => {
    // 获取当前行内样式的z-index，转换为数值，默认值为0
    const currentZIndex = parseInt(header.style.zIndex) || 0;
    // 若z-index小于0，则替换为0
    if (currentZIndex < 0) {
      header.style.zIndex = '0';
    }
  });
});

代码说明 #

• 使用document.querySelectorAll精准定位目标元素
• 遍历每个元素时，通过parseInt将z-index的字符串值转换为数值，避免非数值干扰
• 仅对z-index<0的元素修改值，保留原有合法的正数值和0

CSS 替代方案（有局限性） #

如果不需要保留原有z-index的正数值，仅需确保这类元素的z-index不低于0，可以使用CSS强制覆盖：

div[role="columnheader"] {
  z-index: 0 !important;
}

注意：该方案会将所有目标元素的z-index统一设为0，无法保留原有≥0的数值，仅适合无需区分正数值的场景。

示例对比 #

当前代码：

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

处理后期望结果：

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

内容的提问来源于stack exchange，提问作者Jefflee0915