Question

我有一个涵盖整个文档的DIV：

<DIV style="position:'fixed';left:'0px';width:'100%';height:'100%';top:'0px',z-index:-20">

-20的zIndex是为了防止DIV出现在其他元素之上并干扰鼠标事件。

但是，当页面忙于异步请求时，我想将DIV置于顶端。我的异步请求函数将用户定义的变量元素的类设置为“AJaXBusy”，然后我按照我的要求设置该类的样式。但是，在这种情况下，“zIndex：100”的样式不起作用，因为默认值-20会覆盖它！

这是我正在使用DIV的代码：

css('.AJaXBusy').backgroundColor="#ffddff"
css('.AJaXBusy').zIndex='100 !important'

（CSS函数返回样式表对象样式属性，它大约有30行代码，所以我省略了它。）

如何获取CSS类定义以覆盖直接分配给元素的值？我已经阅读过关于特异性和继承性的内容，但它似乎没有解决文档本身适用的效果。

Answer 1

如果使用JS来设置元素样式（即ele.style.zIndex），则'100 !important'不是合法值（而'100'是），因此表达式会静默失败。

但是，如果您使用ele.setAttribute('style', '.....')，则可以应用!important。

并且，内联样式比css类具有更高的优势，因此您无法覆盖它。

如果您可以编辑HTML，那么更好的方法是使用不同的类定义。

<style>
    .undercover { z-index: -20; }
    .cover { z-index: 100; }
</style>
<div class="AJaXBusy undercover">

然后在想要改变时更改班级名称

var ajaxBusy = document.querySelector('.AJaXBusy')
ajaxBusy.classList.remove('undercover')
ajaxBusy.classList.add('cover')

Answer 2

在声明后使用!important。

z-index:100 !important;

Answer 3

正如其他人所说，zIndex是你在javascript中更新属性的方式，在其他地方你将它称为z-index。

我建议不要使用负z-index来尝试阻止它干扰页面，而是将z-index保持为高，并使用css display：none隐藏DIV;并且只在您希望它阻止页面交互时显示DIV（在AjaXBusy期间）。