如何使用javascript获取h1标记的高度？

我想创造这种效果： 它位于加速自行车共享区下。我做了一个布局的大纲，但在样式上有问题，也不知道如何创建左侧的计数器。我假设我需要得到每个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>

    .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;
                }
            }
}

    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;

下面是javascript:

<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>

    .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;
                }
            }
}

    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

---

谢谢。

您应该为此使用clientHeight attr：

this.h1Test.clientHeight

---

您应该为此使用clientHeight attr：

this.h1Test.clientHeight

---

使用

getBoundingClientRect（）

：

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

就你而言：

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项

选择器设置为

行高

为

0

：

const boundingRect=document.getElementById（'test-h1'）.getBoundingClientRect（）
document.getElementById（'bounding-rect'）。textContent=JSON.stringify（boundingRect，null，2）

h1{
线高：0；
}

线条高度0，报告的高度0：

使用

getBoundingClientRect（）

：

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

就你而言：

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项

选择器设置为

行高

为

0

：

const boundingRect=document.getElementById（'test-h1'）.getBoundingClientRect（）
document.getElementById（'bounding-rect'）。textContent=JSON.stringify（boundingRect，null，2）

h1{
线高：0；
}

线条高度0，报告的高度0：

代码在中工作

代码在中工作

---

你好，给我0。。。不value@junior_coder真奇怪。您介意在JSFIDLE中创建一个示例来说明这个问题吗？您好，给我0。。。不value@junior_coder真奇怪。您介意在JSFIDLE中创建一个示例来说明这个问题吗height@junior_coder我注意到您的页面有许多

元素，因此您确定

h1Test

是正确的

元素吗？如果DOM API说它的高度是

0

，那么它在屏幕上是不可见的（即，它通过

display:none

隐藏）。使用浏览器的F12开发者工具确保您选择了正确的元素。只需尝试使用任何h1来获得高度-在本例中，我使用的第一个h1来查看高度是多少！它现在可以工作了-问题是线条高度：0。所以现在我基本上只是通过高度值来设置动画，对吗？给出0作为height@junior_coder我注意到您的页面有许多

元素，因此您确定

h1Test

是正确的

元素吗？如果DOM API说它的高度是

0

，那么它在屏幕上是不可见的（即，它通过

display:none

隐藏）。使用浏览器的F12开发者工具确保您选择了正确的元素。只需尝试使用任何h1来获得高度-在本例中，我使用的第一个h1来查看高度是多少！它现在可以工作了-问题是线条高度：0。所以现在我基本上只是通过高度值来设置动画，对吗？可能的复制，可能的复制