Question

有没有办法从div上的样式属性获取高度？

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

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

Answer 1

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

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

您不想要使用jQuery的css功能，因为这会为您提供计算的高度，而不是来自style对象。

Answer 2

在jquery中使用css()

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

Answer 3

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

这怎么可能？除非你使用了一些!important语句（你应该避免使用），否则style属性的特异性要高于CSS中的任何其他语句。因此，height()返回的高度应该相同，除非它受到其他容器的约束。

然而，为了达到你想要的目的，你需要做两件事：

为您的div分配ID，以便您可以在Javascript中定位
使用：

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

Answer 4

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

香草：

// 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());

从style属性获取高度

4 个答案: