Question

我正在尝试找到获取元素的CSS高度属性的方法，或者实际上，只是告诉我是否设置了高度属性。

问题是，当我使用

时

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

我得到了元素的显示高度，但我正在尝试查看该元素是否具有在类，id或直接在div中设置的height属性。

有什么建议吗？

Answer 1

您也可以使用height。

$(elem).height(); // to get the height.

Also see this Q/A

如果你想获得正确的CSS值，我可以建议不要使用jQuery

如果我们有HTML：

<div id="elem" style="height: auto"></div>

我们可以写JS：

$('#elem').get(0).style.height    // "auto"

如果我们有HTML：

<div id="elem"></div>

JS：

$('#elem').get(0).style.height    // ""

通用功能：

var height = function(elem){
      return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}

Answer 2

可能不是最好的方法，但我只看一下outerHTML，看看是否设置了高度值。如果不是那么它就在CSS中（或者没有设置）。

s = $(elem)[0].outerHTML;
if (s.indexOf("height:") > 0) {
    // inline style
} else {
    // somewhere else
}

Answer 3

    $( "div" ).click(function() {

you can check if height is defined for this div parent element or children using *this* reference. For now i am just fetching the height of the div which has been clicked.
    var height= $( this ).css( "height" );
    //If height is truthy  
    if(height){
    //your code here
    }
    });

希望这可以回答您的问题。 For more details..

Answer 4

问题是'is set'是什么意思？

在vanilla javascript中你可以这样做：

element.style.height

如果没有设置INLINE高度，这将返回一个空字符串。

但是，如果通过样式表应用了高度，它仍将返回一个空字符串。

问题是，如果你在jQuery中通过.height()或在Javascript中window.getComputedStyle(element).height返回计算高度，那么就无法通过应用样式表来判断它是否是计算出来的（你是什么的将调用'具有高度属性集'），或者通过扩展元素的高度以适合其内容（您称之为'没有高度属性集'）来生成。

---------------------更新----------------------

为了更清楚，我试图看看div的高度是否是计算高度，或者它是否是在css中定义的高度。

div可以包含它的子节点的高度，或者它可以在div上专门设置高度。可以在CSS文件，页面上的样式标记或div本身上设置所讨论的子项或div的高度。

我正在尝试查看div是否具有css set height属性。

by pedalpete

---------------------更新----------------------

我理解你的问题，但也许我的答案有点不透明。

如果元素的样式表应用了样式属性，则无法调用任何内容。换句话说，你不能做你想做的事。

你能找到的唯一一件事（通过element.style）是否有声明的内联样式。

getComputedStyle会告诉你当前元素有多高，但它不会告诉你它是如何形成的。

作者：Graham Nicol

Answer 5

看起来没有一种简单的方法可以做到这一点，我解决这个问题的方法是隐藏div的子节点，并检查div的高度是否已经改变。如果有，则未设置高度，如果没有设置高度。

当div只有文本时，它会失败，但由于这是一个布局标记，它可能总是有子标记。

var elHeight = $(elem).height();
$(elem).children().hide();
var checkHeight = elHeight===$(elem).height();
$(elem).children().show();
console.log(checkHeight);
if(checkHeight===false) return setSize($(elem).parent().height()/2);

使用Javascript获取元素的CSS值

5 个答案: