1

据我所知，DOM 元素的 CSS 属性style是驼峰式大小写的，例如，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"

请参阅 fiddle 以了解此操作。

jQuery 正在做什么来提取我没有做的正确样式属性？

有趣的是，直接在 html 元素上添加样式属性确实有效。

4

3 回答 3

6

您可以使用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 更改：指定、计算和实际值）：

背景位置底部，左边，右边，顶部高度，宽度边距底部，边距左边，边距右边，边距顶部，最小高度，最小宽度 padding-bottom，padding-left，padding-right，padding-顶部文本缩进

于 2013-07-10T10:21:01.023 回答
4

尝试这个：

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

检查你的小提琴的更新：

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

于 2013-07-10T10:26:52.017 回答
0

jQuery 方法 css 并不是那么简单。您可以查看此链接jquery css

.css() 方法是从第一个匹配元素获取样式属性的便捷方法，尤其是考虑到浏览器访问大多数这些属性的不同方式（基于标准的浏览器中的 getComputedStyle() 方法与 currentStyle 和 runtimeStyle Internet Explorer 中的属性）以及浏览器对某些属性使用的不同术语。例如，Internet Explorer 的 DOM 实现将 float 属性称为 styleFloat，而符合 W3C 标准的浏览器将其称为 cssFloat。为了保持一致性，您可以简单地使用“float”，jQuery 会将其转换为每个浏览器的正确值。

于 2013-07-10T10:22:17.453 回答