检查元素是否已定义样式，而不是来自默认样式表

Checking if Element has Style Defined, not from Default Stylesheet

本文关键字：样式 默认 是否 元素 定义 检查      更新时间：2023-09-26

有没有一种方法，使用JavaScript，我可以推断一个元素是否应用了特定的CSS定义，而该定义不是从浏览器的样式表继承的？

我需要知道一个给定的元素是否已经明确地定义了position定义（明确地是一个不是来自浏览器样式表的定义）。

最初想到的是执行一种算法，将所述元素的样式定义与同一元素的默认样式定义进行比较。然而，与默认定义（在默认样式表中定义）相同的定义的场景也很重要。

假设有问题的元素是div。跨浏览器的默认positioning是static。如果它的值是absolute或relative，那么答案很简单。但是，如果是static，据我所知，没有"简单"的方法来确定它是"用户提供的样式"（样式表还是内联样式）。

想到类似object.hasOwnProperty的东西。然而，在这种情况下，它将在类列表上被调用，并且一个属性将作为参数传递；布尔返回值指示属性是否已由"用户定义的定义"设置？

所有元素都具有static的标准位置属性。您可以将这些知识与window.getComputedStyle结合使用，来推断元素是否具有自定义的位置：

var elem = document.querySelector('....');
if (window.getComputedStyle(elem, null) !== 'static') {
    // The element has custom position defined in either .style in via a css rule
}

这有一个明显的关键，即当你指定一个元素的位置为静态时，它不会捕捉到这种情况。要有效地做到这一点，您必须查看哪些CSS样式适用于您的特定元素，并查看其中是否有"position"。您可以使用以下内容：https://github.com/Box9/jss为了得到它。（以前有window.getMatchedSSRules，但现在已经弃用了）

如果您不想使用库来实现这一点，可以手动解析rules的所有document.styleSheets，并查看selectorText是否与您的元素匹配。

这只是我在5分钟内写的一个方法，效果很好（尽管要小心，这不是世界上性能最好的方法）：

function getStylesForElement (elem) {
    var result = {};
    [].slice.call(document.styleSheets).forEach(function (stylesheet) {
        // some stylesheets don't have rules
        if (!stylesheet.rules) return;
        [].slice.call(stylesheet.rules).forEach(function (rule) {
            // account for multiple rules split by a comma
            rule.selectorText.split(',').forEach(function (selector) {
                if (elem.matches(selector)) {
                    for (var index=0; index < rule.style.length; ++index) {
                        var prop = rule.style[index];
                        result[prop] = rule.style[prop];
                    }
                }
            });
        });
    });
    return result;
}
相关文章：