你能檢測到dom節點的樣式何時設置為'auto'？

Question

使用示例CSS：

.thing { height: auto }

和HTML：

<div class="thing">The quick brown fox jumps over a lazy dog.</div>

是否有可能檢測到.thing的高度設置為'auto'？

以下方法返回值：

jQuery('.thing').height()        // n
jQuery('.thing').css('height')   // 'npx'
getComputedStyle(node).height    // 'npx'

是否有任何方法可以告訴我瀏覽器正在從'auto'計算這些值？

Answer 1

是的，有辦法，但這不是一個有趣的方式。 你要做的是：

1. 遍歷所有樣式styletags和鏈接的樣式表。

2. 然后獲取所有樣式標記中所有cssRules的selectorText

    styletag.sheet.cssRules.selectorText 

   或IE <9

    styletag.styleSheet.cssRules.selectorText 

3. 獲取所有元素parent id ， class和tagName以找出標記獲取屬性的可能方式。

4. 在cssRules列表中找到指向元素的所有可能組合
5. 檢查這些cssRules在cssRules.style.width如果是自動。

或者做一些反向的方式，找到所有cssRules與style.width == 'auto'; 無論哪種方式，如果沒有很多代碼，它就不容易獲得

Answer 2

jQuery('.thing').each(function (i,n){
  console.log( $(n).style.height);// if not then just try to simply find the n.style.height
});

//this is another way // at least in ff it would work :)
window.document.styleSheets[0].cssRules[0].style.height

希望它有所幫助，否則你有很多挖掘要做:)

對於第二個選項，你看到[0]意味着你必須循環，因為可能有不同的文件名等等...

完整的例子：

var ss = window.document.styleSheets;
for(i=0;i<ss.length;i++){
    var rules = ss[i].cssRules;
    for(j=0;j<rules.length;j++){//loop style sheets
        var rule = rules[j];
        if(rule.selectorText=='thing'){//loop each stylesheet rule
             console.log(rule.style.height);
              // should return height for everytime height is used with every .thing in any of your stylesheets attached :)
        }
    }
}

請注意

如果你已經包含<link ....="...jquery.com.../ui.css" />它將無法正常工作，因此這可能會被視為安全風險（跨域）...

Answer 3

這不是最有效的解決方案，特別是對於舊的IE版本，但它應該工作得很好：

1. 測量元素的高度
2. 在元素中附加一些內容，例如<div style="clear: left; height: 30px">Test</div>
3. 測試新的高度，如果已更改，則元素的高度為auto
4. 刪除內容

這是我的實現：

$.fn.hasAutoHeight = function() {
    if (this.length === 0) return;
    var self = this.first();
    var height = self.css("height");
    var position = self.css("position");

    // Check for inline elements
    if (self.css("display") === "inline" && self.css("float") === "none") {
        var position = self.css("position");
        if (position === "static" || position === "relative") return true;  
    }

    // Quick check to see if a style height is set
    if ($.style(self[0], "height") !== "") return false;

    // Otherwise use the long route
    var test = $('<div style="clear: both; height: 30px">Test</div>');
    self.append(test);
    var hasAutoHeight = self.css("height") !== height;
    test.css("color", "red").remove();
    return hasAutoHeight;
};

筆記：

• 如果有height: auto !important; ，“快速檢查”行可能無法正常工作height: auto !important; CSS中的規則，在這種情況下，你總是要走很長的路。
• 這在DOM交互方面效率不高，因此您的應用程序可能希望盡可能緩存此結果。
• 我不願意在插件內部緩存結果，因為類/ CSS規則可能會更改並使結果無效。
• 這對於沒有主體的元素（例如<img>和<br>不起作用

Answer 4

以下是對上述建議的更完整實施：

$("*").data("autoHeight", "false");
var stylesheets = window.document.styleSheets;
for (i=0; i < stylesheets.length; i++) {
    var rules = stylesheets[i].cssRules;
    for (j = 0; j < rules.length; j++) {
        var rule = rules[j];
        var style = rule.style.getPropertyValue("height");
        var auto = !style || style.match(/^\s*auto\s*(!important)?$/);
        $(rule.selectorText).each(function() {
            var elem = $(this);
            if (asSpecific(rule.selectorText, $(elem).data("autoHeightSelector"))) {
                $(elem).data("autoHeight", !!auto);
                $(elem).data("autoHeightSelector", rule.selectorText);
            }
        });
    }
}

如果css選擇器a至少與選擇器b一樣具體，那么你需要實現asSpecific(a, b) ，例如p#foo a#bar比p.foo更具體。 您還需要考慮!important標志。

這可能很有用： http ： //www.w3.org/TR/CSS2/cascade.html#specificity

這應該為每個元素添加一個數據屬性，指定它是否在CSS中具有自動高度樣式，但是您還需要檢查樣式屬性並考慮默認樣式。