檢查元素是否定義了樣式，而不是來自默認樣式表

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 樣式適用於您的特定元素，並查看它們中是否有任何一個是“位置”。 您可以使用以下內容： 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;
}