据我所知,DOM元素style
的CSS属性是驼色大小写的,因此min-height
将是element.style.minHeight
,但在下面的示例中,样式属性是空的,但jQuery的抽象正确地得到了它。
// element with css: #test{ min-height: 100px; }
var el = document.getElementById('test');
console.log( el.style.minHeight );
// ""
console.log( $(el).css('min-height') );
// "100px"
请参阅小提琴演奏。
jQuery正在做什么来提取我没有做的正确样式属性?
有趣的是,直接在html元素上添加样式属性确实有效。
您可以使用window.getComputedStyle(el,null).getPropertyValue("min-height")
并查看它是否返回正确的值。
警告:它可能不适用于IE<8.
从Mozilla的网站。。。
CSS2.0仅将计算值定义为属性计算的最后一步。然后,CSS2.1引入了used value的独特定义,这样元素就可以显式继承计算值为百分比的父元素的宽度/高度。对于不依赖于布局的CSS属性(例如,显示、字体大小、行高),计算值和使用值是相同的。这些属性确实取决于布局,因此具有不同的计算值和使用值:(取自CSS 2.1更改:指定值、计算值和实际值):
背景位置底部、左侧、右侧、顶部高度、宽度页边距底部,页边距左侧,页边距右侧,页边距顶部,最小高度、最小宽度底部填充、左侧填充、右侧填充、顶部填充文本缩进
试试这个:
style = window.getComputedStyle(el),
console.log( style.getPropertyValue('min-height'));
查看小提琴的更新:
http://jsfiddle.net/VEuJe/4/
.css()方法是从第一个匹配的元素,特别是在不同的方式下浏览器访问这些属性中的大部分(getComputedStyle()方法与currentStyle和Internet Explorer中的runtimeStyle属性)和不同的术语浏览器用于某些属性。例如,Internet Explorer的DOM实现将float属性称为styleFloat,而符合W3C标准的浏览器将其称为cssFloat。对于一致性,您可以简单地使用"float",jQuery将对其进行翻译设置为每个浏览器的正确值。