时间戳

首页 > 解决方案 > 用 JS 检测单独 DOM 元素的重要 css 规则

javascript - 用 JS 检测单独 DOM 元素的重要 css 规则

问题描述

我怎样才能检测到有向 DOM 元素的样式属性的重要规则？

前任：

<div class = "class">
***content***
</div>

.class{
top: 45px!important; 
}

let elmStyles = document.getElementsByClassName('class')[0].style;
/* i need this =====> */  let isImportant = elmStyles.getPropertyPriority("top");

我已经找到了一些相关信息，但我无法将其应用于具体的 DOM 元素 https://developer.mozilla.org/ru/docs/Web/API/CSSStyleDeclaration/getPropertyPriority

标签： javascriptcss

解决方案

您可以找到应用到的所有元素top和特定类.class

意味着您需要遍历所有规则并为其找到相应的类

var declaration = document.styleSheets;
for(var i=0;i<declaration.length;i++) {
    for(var j=0;j<declaration[i].cssRules.length;j++) {
        var rule = declaration[i].cssRules[j];
        if(rule.style.getPropertyPriority("top")=="important") {
            var selector = rule.selectorText;
            if(selector[0]==".") {
                var elements = document.getElementsByClassName(selector.substring(1));
                for(var k=0;k<elements.length;k++) {
                    var element = elements[k];
                    console.log(element)
                }
            }
        }
    }
}

此循环将遍历所有规则并将 findtop标记为!important

然后选择class应用的所有元素并在控制台中打印

目前我只为class, for写过代码ID，tag name这是行不通的

推荐阅读