Question

我想要一个图标，该图标在各种长度的标题前面，有时为1行，有时为2行，该图标的大小应调整为1或2行的高度。

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

因此，我想用$('.headline').height();获得.headline跨度的高度（或者应该是div？），然后通过.css()将返回值添加到.svg-container中。

但是我没有得到实际的高度，它返回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>

Answer 1

我将.svg-container元素从span更改为div，因为span自然不接受宽度。我还添加了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>

Answer 2

仅当我们将其设置为块元素时，Span才会采用宽度和高度。默认情况下，跨度以行内显示，这意味着它们没有高度和宽度。

所以替换

 <span class="headline">Headline in here</span>

使用

 <div class="headline">Headline in here</div>

编辑1：

正如MiXT4PE所指出的，也用div标签替换svg-container。

jQuery height（）不返回实际高度，而是0，-2或2

2 个答案: