[英]Can you detect when a dom node's style is set to 'auto'?
使用示例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'计算这些值?
是的,有办法,但这不是一个有趣的方式。 你要做的是:
styletags
和链接的样式表。 然后获取所有样式标记中所有cssRules
的selectorText
styletag.sheet.cssRules.selectorText
或IE <9
styletag.styleSheet.cssRules.selectorText
获取所有元素parent id
, class
和tagName
以找出标记获取属性的可能方式。
cssRules
列表中找到指向元素的所有可能组合 cssRules
在cssRules.style.width
如果是自动。 或者做一些反向的方式,找到所有cssRules
与style.width == 'auto';
无论哪种方式,如果没有很多代码,它就不容易获得
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" />
它将无法正常工作,因此这可能会被视为安全风险(跨域)...
这不是最有效的解决方案,特别是对于旧的IE版本,但它应该工作得很好:
<div style="clear: left; height: 30px">Test</div>
这是我的实现:
$.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中的规则,在这种情况下,你总是要走很长的路。 <img>
和<br>
不起作用 以下是对上述建议的更完整实施:
$("*").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中具有自动高度样式,但是您还需要检查样式属性并考虑默认样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.