获取元素的CSS样式

Question

我有一个具有以下样式的元素：

<div id="myElement" style="opacity: 0.9; cursor: auto; visibility: visible;"></div>

我想确保它总是（setInterval？）具有这些样式，不多也不少，根本没有变化。我想知道是否可以重新检索元素的所有样式（内联CSS或外部）并比较它们以确保没有更改？

Answer 1

对于单个元素，我不会想象设置它和首先检查它之间的性能差异是显着的。你也可以这样做：

$(document).ready(function(){
    var t = setInterval(function(){
        $('#myElement').attr('style', 'opacity: 0.9; cursor: auto; visibility: visible;');
    }, 1000);
}

我意识到你通常会使用$（'＃myElement'）。css来设置样式，但是为了确保没有添加新的样式，设置样式属性应该达到你想要的效果。不幸的是，它没有考虑到页面上其他地方的样式表或样式块的更改。为此，您必须使您的样式属性更加全面，并在每个值后包含“！important”。

出于兴趣，为什么你需要这样做？听起来这个问题可能有更好的解决方案。

修改 如果要使用clearInterval而不是

停止用户

var t = setInterval(...);

只需使用

setInterval(...);

由于clearInterval需要引用间隔才能清除它（如果我错了，请纠正我）。通过不创建该引用，间隔仍然执行但不可清除。

最终，虽然我认为不会有一种万无一失的方法来实现这一目标。但是，它应该阻止除了最坚决的用户以外的所有用户隐藏你想要他们看到的内容。

编辑2： 如果您只是想检查CSS，可能会有点痛苦，因为您必须轮流检查每个属性。使用jQuery的css函数你可以这样做：

$(document).ready(function(){
    setInterval(function(){
        var el = $('#myElement');
        var tampered = false;
        if (el.css('display') != 'block') tampered = true;
        if (el.css('visibility') != 'visible') tampered = true;
        if (el.css('position') != 'static') tampered = true;
        ....
        if (tampered){
            // Do your thing
        }
    }, 1000);
}