给出未设置高度元素的高度[重复]

Question

你好，我在 HTML 中有这段代码

<div class="box"><!-- a long text --></div>

.box 有 10 行内部文本

.box 的 CSS 是

.box{
    width:200px;
    height: initial;
    overflow: auto;
    min-height: 20px;
}

我想得到 .box 的高度， 我用这个

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

但是给我 0px

上面的代码是你更好理解的示例

我的元素的真实代码

    <li>                 <p class="proSliderText">this is a p tag</p>
 </li>

css

 .proSliderText{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-15%;
    min-height: 40px;
    margin-top: -40px;
    width:20%;
    font-size: 4vw;
    height: initial;
}

父标签 CSS

    .proSlider li{
    list-style-type: none;
    position: absolute;
    top:0;
    left:0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

这里不需要 jQuery。

console.log(document.querySelector('.box').clientHeight+'px');

.box{ width:200px; height: initial; overflow: auto; min-height: 20px; }

<div class="box">Die US-Amerikaner CHELSEA GRIN haben ihr erstes Album mit Tom Barber (ehemals Lorna Shore) als ihren neuen Sänger angekündigt. Am 13. Juli wird "Eternal Nightmare" bei Rise Records erscheinen und mit "Dead Rose" gibt es auch einen ersten Vorgeschmack, der beweist, daß sich der Nachfolger von Alex Koehler nahtlos in das Bandgefüge einfügt. In den vergangenen Monaten hat sich neben ALEX KOEHLER (Vocals) auch JACOB HARMOND (Guitar) entschieden, aus persönlichen Gründen die Band zu verlassen. CHELSEA GRIN haben sich mit diversen Deutschlandtourneen und ihrem letzten Album "Self Inflicted" in die Herzen der Deathcore-und Metalcore-Fans gespielt. Die US-Amerikaner CHELSEA GRIN haben ihr erstes Album mit Tom Barber (ehemals Lorna Shore) als ihren neuen Sänger angekündigt. Am 13. Juli wird "Eternal Nightmare" bei Rise Records erscheinen und mit "Dead Rose" gibt es auch einen ersten Vorgeschmack, der beweist, daß sich der Nachfolger von Alex Koehler nahtlos in das Bandgefüge einfügt. In den vergangenen Monaten hat sich neben ALEX KOEHLER (Vocals) auch JACOB HARMOND (Guitar) entschieden, aus persönlichen Gründen die Band zu verlassen. CHELSEA GRIN haben sich mit diversen Deutschlandtourneen und ihrem letzten Album "Self Inflicted" in die Herzen</div>

Answer 2

如果 div 类 box 不为空，那么代码 $('.box').css('height') 应该可以工作：

console.log($('.proSliderText').css('height'));

.proSliderText {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15%;
  min-height: 40px;
  margin-top: -40px;
  width: 20%;
  font-size: 4vw;
  height: initial;
}

.proSlider li {
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="proSlider">
  <li>
    <p class="proSliderText"> this is a p tag </p>
  </li>
</ul>