时间戳

首页 > 解决方案 > jQuery height() 不返回实际高度，而是返回 0、-2 或 2

jquery - jQuery height() 不返回实际高度，而是返回 0、-2 或 2

问题描述

我想要一个不同长度的标题前面的图标，有时是 1 行，有时是 2 行，图标应该调整到 1 或 2 行的高度。

由于 svg 占用了所有可用空间，它总是与 .svg 容器一样大。图标的 svg 是平方的，这就是我想要为其容器 .svg-container 实现的目标。它应该具有与 .headline 元素相同的高度，因此该高度也适用于 .svg 容器的宽度。

因此，我想获得 .headline 跨度的高度（或者它应该是一个 div 吗？）$('.headline').height();并将返回值添加到 .svg-container via .css()。

但我没有得到真正的高度，它返回 0。我试图获取页面上其他元素的高度，但它返回 0、-2 或 2。

我已经发现它需要一个$(document).ready(function(){，但这并没有改变任何事情。

$(document).ready(function() {
  var headlineHeight = $('.headline').height();
  $('.svg-container').css('width', headlineHeight)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 class="spacing-after headline-with-icon">
  <span class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
    <use xlink:href="#icon-1"/><!-- takes the icon form an svg sprite -->  
  </svg>
  </span>
  <span class="headline">Headline in here</span>
</h1>

标签： jqueryhtmlcss

解决方案

我将.svg-container-element 从 a更改span为 adiv因为 aspan自然不接受宽度。我还添加了width: 100%;这样的 svg 符合它的父母宽度，你可以看到脚本运行后 svg 变小了。我也投了一个console.log()很好的措施。

$(document).ready(() => {
  let headlineHeight = $('.headline').height();
  
  console.log(headlineHeight);
  
  $('.svg-container').css('width', headlineHeight)
});
.svg-container > svg {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 class="spacing-after headline-with-icon">
  <div class="svg-container">
    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="196" height="96" style="fill:#dedede;stroke:#555555;stroke-width:2"/></svg>
  </div>
  <span class="headline">Headline in here</span>
</h1>

推荐阅读