jquery 如何使用JavaScript/css更改html div样式的z索引值

dhxwm5r4 于 2023-02-21 发布在 jQuery

关注(0)|答案(2)|浏览(202)

我想把所有z-index〈0的值替换为0，其中role ="columnheader"。我怎么用javascript或css实现这个呢？
电流输出

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

jquery

来源：https://stackoverflow.com/questions/75445116/how-to-change-html-div-style-z-index-value-using-javascript-css

2条答案

按热度按时间

pbpqsu0x1#

在循环中使用属性选择器和并有条件地更改z索引：

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

或者你可以像这样在css中使用属性选择器：

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

赞(0）回复(0）举报 2023-02-21

yks3o0rb2#

您可以使用querySelectorAll命令查询所有元素，然后为forEach循环中的每个元素应用z索引

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

赞(0）回复(0）举报 2023-02-21

我来回答

jquery 如何使用JavaScript/css更改html div样式的z索引值

2条答案

相关问题

热门标签

最新问答