从样式属性中获取高度

Question

如何从div的style属性中获取高度？

<div style="height:100px;"></div>

我不能使用.height()，因为这只会返回元素当前的高度 - 我需要检查样式是否已经设置，然后获取该高度。

- Pete

---

“style” 不会改变您元素的 “height”，因此是相同的吗？ - putvande

@putvande：可能但不一定，样式表中的!important规则会覆盖内联样式（除非内联样式也是!important）。有时浏览器不使用样式值。因此，样式属性和高度可能会不同。 - T.J. Crowder

@putvande 如果一个 div 的高度已经在样式属性中设置了，我只需要改变它的高度（否则它将自动调整为 auto）。 - Pete

Answer 1

最简单的方法是直接进入style属性：

var heightStyleValue = $("selector for your element")[0].style.height;

你不想使用jQuery的css函数，因为它会给你计算后的高度，而不是从style对象中获取的值。

- T.J. Crowder

---

在计时器结束之前回复Pete Gud。 - Karthik Surianarayanan

Answer 2

你不能使用elem.style.height，因为style的命名值具有默认值。如果你真的想知道哪些样式参数已经设置，请将style视为数组。

纯JavaScript：

// get style attributes that were actually set on the element
function getStyle(elem,prop) {
    var actuallySetStyles = {};
    for (var i = 0; i < elem.style.length; i++) {
        var key = elem.style[i];
        if (prop == key)
            return elem.style[key];
        actuallySetStyles[key] = elem.style[key];
    }
    if (!prop)
        return actuallySetStyles;
}

console.log(getStyle(elem,'height'));
console.log(getStyle(elem));

jQuery：

jQuery.fn.extend({

    // get style attributes that were set on the first element of the jQuery object
    getStyle: function (prop) {
        var elem = this[0];
        var actuallySetStyles = {};
        for (var i = 0; i < elem.style.length; i++) {
            var key = elem.style[i];
            if (prop == key)
                return elem.style[key];
            actuallySetStyles[key] = elem.style[key];
        }
        if (!prop)
            return actuallySetStyles;
    }
}


console.log(jQuery(elem).getStyle('height'));
console.log(jQuery(elem).getStyle());

- oriadam

Answer 3

在 jQuery 中使用 css()。

$('div').css('height');

- Sudharsan S

---

不，那会给你计算出来的高度，就像height()一样。 - T.J. Crowder

@T.J.Crowder 计算高度是什么意思？ - Anoop Joshi P

@AnoopJoshi：你可以使用style="height: 20px"，但是css返回的值是40。为什么？因为一个!important样式表规则覆盖了style的值。（或者因为浏览器在某些情况下忽略了样式值。） - T.J. Crowder

Answer 4

我不能使用.height()，因为这只会返回元素的当前高度（...）

这怎么可能？除非你使用了一些!important语句（应该避免），否则样式属性具有比CSS中任何其他内容更高的特异性。因此，height()返回的高度应该是相同的，除非它受到某个其他容器的限制。

但是，为了实现你想要做的事情，你需要做两件事：

1. 给你的div分配一个ID，这样你就可以在Javascript中定位它

2. 使用：

   document.getElementById("yourID").style.height;

- MMM

---

是的，但如果没有设置样式，我不想要高度，而css('height')与.height()相同。 - Pete