如何获得最小高度 CSS 属性？ [复制]答案

【问题标题】：How to get min-height CSS property? [duplicate]如何获得最小高度 CSS 属性？ [复制]
【发布时间】：2013-07-08 05:31:33
【问题描述】：

据我所知，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"

See fiddle for this in action.

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

有趣的是，直接在html元素does work上添加样式属性。

【问题讨论】：

看起来这是getComputedStyle的情况，但由于样式直接应用于元素而不是继承，我不明白为什么需要这样做。
—— style 属性指的是内联样式，而不是样式表（继承的或其他的）。

标签： javascript jquery dom styles

【解决方案1】：

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

警告：它可能不适用于 IE

来自 Mozilla 的网站...

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

背景位置下、左、右、上高度宽度下边距，左边距，右边距，上边距，最小高度，最小宽度 padding-bottom, padding-left, padding-right, padding-top 文本缩进

【讨论】：

谢谢你。我很好奇为什么将规则直接应用于元素时需要计算样式。也许是因为它是一个较新的 CSS 标准？
因为它并不直接应用于元素。该样式适用于 id 为 test 的所有元素。然而，虽然该样式应用于这些元素，但它并没有附加到它。 el.style 只会获取在 html 中内联应用的样式。必须计算在其他地方应用的任何样式。
接受它最好地解释了为什么需要计算样式，而不仅仅是应该使用它。
工作，谢谢 :)

【解决方案2】：

试试这个：

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

检查你的小提琴的更新：

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

【讨论】：

酷！技巧，今天学习新东西:)

【解决方案3】：

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

.css() 方法是从第一个匹配的元素，尤其是考虑到不同的方式浏览器访问这些属性中的大部分（getComputedStyle() 基于标准的浏览器中的方法与 currentStyle 和 Internet Explorer 中的 runtimeStyle 属性）和不同的术语浏览器用于某些属性。例如，Internet Explorer 的 DOM 实现将 float 属性称为 styleFloat，而符合 W3C 标准的浏览器将其称为 cssFloat。为了一致性，你可以简单地使用“float”，jQuery会翻译它为每个浏览器设置正确的值。

【讨论】：