Javascript 是否可以检测dom节点'；s样式设置为'；自动'；？

使用CSS示例：

.thing { height: auto }

和HTML：

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

是否有任何方法可以告诉我浏览器是从“自动”计算这些值的

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 :)
        }
    }
}

var ss=window.document.styleSheets；
对于（i=0；i是的，有一种方法，但并不好笑。你要做的是：

循环浏览所有
样式标签
和链接的样式表
然后为所有样式标记中的所有
cssRules
获取
selectorText

styletag.sheet.cssRules.selectorText

或IE<9

styletag.styleSheet.cssRules.selectorText


获取所有元素父级
id
、
class
和
标记名
，以了解标记获取属性的可能方式

找到所有可能的组合，这些组合指向你的生活中的元素
cssRules的列表

检查
cssRules.style.width
处的
cssRules
是否为自动
或者以相反的方式使用
style.width==“auto”；
查找所有
cssRules
；无论哪种方式，如果没有大量代码，都不容易获得这不是最有效的解决方案，尤其是对于旧的IE版本，但它应该工作得很好：

测量元素的高度
向元素添加一些内容，例如
Test
测试新高度，如果它已更改，则您的图元具有自动高度
删除内容
以下是我的实现：

$.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;
};

$.fn.hasAutoHeight=函数（）{
如果（this.length==0）返回；
var self=this.first（）；
var height=self.css（“高度”）；
var position=self.css（“position”）；
//检查内联元素
if（self.css（“display”）=“inline”&&self.css（“float”）=“none”）{
var position=self.css（“position”）；
if（position==“static”| | position==“relative”）返回true；
}
//快速检查是否设置了样式高度
if（$.style（self[0]，“height”）！=“”）返回false；
//否则，请使用长路线
var测试=$（“测试”）；
自我附加（测试）；
var hasaautoheight=self.css（“高度”）！==height；
css（“颜色”、“红色”）.remove（）；
返回高度；
};

注:


如果CSS中存在
height:auto！important；
规则，则“快速检查”行可能无法正常工作，在这种情况下，您必须始终执行长路径
这在DOM交互方面效率不高，因此应用程序可能希望缓存此结果
我不愿意在插件内部缓存结果，因为类/CSS规则可能会更改并使结果无效
这不适用于没有主体的元素，例如
和


以下是上述建议的更完整实施：

$("*").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);
            }
        });
    }
}

$（“*”）.data（“自动高度”、“假”）；
var stylesheets=window.document.stylesheets；
对于（i=0；i

您需要实现
assspecific（a，b）
，如果css选择器
a
至少与选择器
b
一样具体，则应该解决这一问题，例如
p\foo a\code>比
p.foo
更具体。您还需要考虑
！重要的
标志

这可能有用：

这应该为每个元素添加一个数据属性，指定它在CSS中是否具有自动高度样式，但您还需要检查样式属性并考虑默认样式。
我建议您获取最后一个rule.style.height，因为这是最新的：）如果我想到这样的事情可以做的话，我会覆盖预览。约翰·奥尔森的答案更加有力。我需要测试的不仅仅是selectorText=='thing'。选择器，如body>*：第一个孩子可能会影响我的div。你可以把所有这些都放在一个函数中，实际上你可以这样搜索它。。。它可能看起来像jquery
findcss（'.thing'）.height
，您可以通过使用检查某些内容的函数对其进行扩展，您可以选择模式，这将更容易：）：）这本身可能是一个有效的问题，但您是否正在尝试解决更深层的问题？是的。动态扩展CSS3转换的行为，以便能够从{height:20px}转换到{height:auto}，这是目前浏览器无法做到的。我担心这可能是答案。我认为相反的方式可能更明智，因为可能有很多选择器可以选择我的div–body>*：first child，例如，我不喜欢试图找出它们都是什么，然后循环找到它们。用相反的方法我会：1。查找宽度为“自动”的所有cssRules。2.使用querySelectorAll测试cssRules.selectorText，查看是否选择了my div。3.找出产生的css选择器中哪一个是最重要的。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);
            }
        });
    }
}