Question

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

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

最初想到的是执行一个算法来比较所述元素的样式定义与同一元素的默认样式定义。但是，与默认定义（在默认样式表中定义）相同的定义也很重要。

假设有问题的元素是div。跨浏览器的默认position是static。如果它的值为absolute或relative，则答案很简单。但是，如果它是static，我知道并不是“简单”的方式，以确定它是否是“用户提供的样式”（样式表或内联样式）。

思考类似于object.hasOwnProperty的事情。但是，在这种情况下，它将在类列表中调用，属性将作为参数传递;使用布尔返回值来指示属性是否已由“用户定义的定义”设置？

Answer 1

所有元素都具有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样式适用于您的特定元素，并查看它们中的任何一个是否位于＆＃39;位置＆＃39;。您可以使用类似：https://github.com/Box9/jss的内容来获取该内容。（以前是window.getMatchedCSSRules，但不推荐使用）

如果您不想使用库来实现此目的，则可以手动解析document.styleSheets的所有rules，并查看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;
}

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

1 个答案: