Question

我正在尝试在jQuery中获得div的高度支柱。真的很简单：

$("#mydiv").css("height");

是的。但是，如果div的最小高度比高度高，则此代码将返回最小高度。我如何强迫它给我身高？

示例：

$("#result").html($("#mydiv").css("height"));

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>
<div id="result"></div>
In this example, how can I get "10px" ?

Answer 1

您可以将元素的min-height设置为auto并获得其height的属性。然后将min-height返回第一个值。

var minHeight = $("#mydiv").css("min-height");
$("#mydiv").css("min-height", "auto");
console.log($("#mydiv").height());
$("#mydiv").css("min-height", minHeight);

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

Answer 2

将最小高度保持在80像素（大于10像素（高度））。

您的div一直都是80px。

如下面的示例所示，我将高度保持为100px，因为高度大于最小高度，所以高度变为100px而不是80px。

$("#result").html($("#mydiv").css("height"));

#mydiv{
  width : 100px;
  height : 100px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>





<div id="result"></div>
In this example, how can I get "10px" ?

因此，如果您希望ur div的高度为10px，则可以删除min-height或将min-height值设置为10px以上。

希望它会有所帮助：）

Answer 3

尽管穆罕默德（Mohammed）的答案是最好的方法，但另一种方法是添加一个孩子并将其高度设置为“继承”，并从该孩子那里读取“ height”属性。

var source = $("#mydiv");
var sourceHeight = source.append('<div></div>').find('div').css('height', 'inherit').css('height');
console.log('height of source is '+sourceHeight);
source.find('div').remove(); //make sure to remove it

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv" style=""></div>

Answer 4

另一种想法是简单地从CSS文件中读取值，而无需更改任何属性即可轻松获得高度：

function getStyle(select) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == select) {
           var s = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
           return s;
        }
    }
}
console.log(getStyle('#mydiv'));

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<div id="mydiv"></div>
<div id="result"></div>
In this example, how can I get "10px" ?

如何获得带有最小高度的div高度？

4 个答案: