javascript - 获取元素的 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);
}