如何使用 JavaScript 获取 H1 标签的高度?

Question

我想创造这个效果：https://bewegen.com/en 它在加速自行车共享部分下。我做了布局的轮廓，但样式有问题，也不确定如何在左侧创建计数器。我假设我需要获取每个 h1 的高度，然后将其向下移动该高度。

这是 html：

<div class="why-us__carousel">
<div class="carousel__count">
<h1 class="count__zero">0</h1>
<div class="count__num-item-holder">
<h1 class="count-num-item">1</h1>
<h1 class="count-num-item">2</h1>
<h1 class="count-num-item">3</h1>
<h1 class="count-num-item">4</h1>
<h1 class="count-num-item">5</h1>
<h1 class="count-num-item">6</h1>
<h1 class="count-num-item">7</h1>
<h1 class="count-num-item">8</h1>
<h1 class="count-num-item">9</h1>
</div>          
</div> 
<div class="carousel__item">
<div class="item__navigation">
<a id="arrow-left" class="arrow">
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-7" transform="translate(-854.000000, -2100.000000)" fill-rule="nonzero">
<g id="Group-3" transform="translate(855.000000, 2101.000000)">
<polyline id="Path" stroke="#979797" points="25.3616433 28.4003541 20 23.0387108 25.3616433 17"></polyline>
<circle id="Oval" stroke="#FFFFFF" cx="23" cy="23" r="23"></circle>
</g>
</g>
</g>
</svg>
</a>
<a id="arrow-right" class="arrow">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-7" transform="translate(-854.000000, -2100.000000)" fill-rule="nonzero">
<g id="Group-3" transform="translate(878.000000, 2124.000000) rotate(-180.000000) translate(-878.000000, -2124.000000) translate(855.000000, 2101.000000)">
<polyline id="Path" stroke="#979797" points="25.3616433 28.4003541 20 23.0387108 25.3616433 17"></polyline>
<circle id="Oval" stroke="#FFFFFF" cx="23" cy="23" r="23"></circle>
</g>
</g>
</g>
</svg>
</a>
</div>
<p class="item__count">01</p>
<h1 class="item__title"></h1>
<h1 class="item__description"></h1>
</div>
</div>

这是 css：

.why-us{
@include element("carousel"){
width: 80%;
// height: 200px;
margin: 0 auto;
position: relative;
border: 1px solid green;
}
.carousel__count{
position: absolute;
left: 0%;
top: 45%;
// transform: translateY(-20%);
display: flex;
border: 1px solid red;
.count__zero, .count-num-item{
font-size: 250px;
line-height: 0;
}
.count-num-item{
&:not(:first-child){
transform: translateY(200px);
}
}
}
.carousel__item{
position: relative;
left: 425px;
width: 400px;
height: 400px;
border: 1px solid blue;
}
.item__navigation{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -70px;
display: flex;
width: 50%;
justify-content: space-evenly;
.arrow{
cursor: pointer;
}
}
}

这是javascript：

class WhyUs {
constructor() {
//global variables 
this.arrowRight = document.querySelector('#arrow-right');
this.arrowLeft = document.querySelector('#arrow-left');
this.h1Test = document.querySelectorAll('.count-num-item')[0];
console.log(this.h1Test.offsetHeight);// this isn't working.
//method calls
this.events();
}
events(){
this.arrowRight.addEventListener('click', this.next.bind(this));
this.arrowLeft.addEventListener('click', this.previous.bind(this));
}
previous(){
alert('previous');
}
next(){
alert('next');
}

}
export default WhyUs;

每个 h1 标签的高度不起作用，如何解决此问题还是有其他方法？另外，clientHeight给我的值是0，而且：getBoundingClientRect((也给了0的高度值。

谢谢。

Answer 1

使用getBoundingClientRect()：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

返回值是一个 DOMRect 对象，它是 getClientRects(( 为元素返回的矩形的并集，即与元素关联的 CSS 边框框。结果是包含整个元素的最小矩形，具有只读的左、上、右、下、x、y、宽度和高度属性，以像素为单位描述整个边框框。宽度和高度以外的属性相对于视区的左上角。

在您的情况下：

this.h1Test = document.querySelectorAll('.count-num-item')[0];
var height = this.h1Test.getBoundingClientRect().height;

要包括上边距和下边距，请使用：

var h1Margins = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10);
var heightWithMargins = height + h1Margins;

在尝试计算h1标签的高度时，您现在得到 0 的原因是您的 CSS 将.count-num-item选择器设置为line-height0：

const boundingRect = document.getElementById('test-h1').getBoundingClientRect()
document.getElementById('bounding-rect').textContent = JSON.stringify(boundingRect, null, 2)

h1 {
line-height: 0;
}

<div>
<h1 id="test-h1">Line height 0, reported height 0:</h1>
<pre id="bounding-rect"></pre>
</div>

Answer 2

你应该使用 clientHeight attr 来实现这一点：

this.h1Test.clientHeight

Answer 3

代码在 http://jsfiddle.net/o25dfz7j/1/中工作。

this.h1Test.offsetHeight // it works, output 38 in fireforx
this.h1Test.clientHeight // it works too, output 38 in fireforx