如何获得min-height CSS属性？

Question

据我所知,DOM元素的CSS属性style是驼峰式的,这样min-height就可以了element.style.minHeight,但是在我的例子中,style属性是空的,但是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元素上添加样式属性确实有效.

Answer 1

您可以使用window.getComputedStyle(el,null).getPropertyValue("min-height")并查看它是否返回正确的值.

警告:它可能无法在IE <8上运行.

来自Mozilla的网站......

CSS 2.0仅将计算值定义为属性计算的最后一步.然后,CSS 2.1引入了使用值的不同定义,以便元素可以显式地继承其计算值为百分比的父级的宽度/高度.对于不依赖于布局的CSS属性(例如display,font-size,line-height),计算值和使用的值是相同的.这些属性依赖于布局,因此具有不同的计算值和使用值:(取自CSS 2.1更改:指定,计算和实际值):

background-position bottom,left,right,top height,width margin-bottom,margin-left,margin-right,margin-top,min-height,min-width padding-bottom,padding-left,padding-right,padding-顶部文本缩进

Answer 2

尝试这个：

style = window.getComputedStyle(el),
console.log( style.getPropertyValue('min-height'));

检查你的小提琴的更新：

http://jsfiddle.net/VEuJe/4/