how to get height of an h1 tag with javascript?

Question

I wanted to create this effect: https://bewegen.com/en Its under the Accelerating Bike Share section. I made an outline of the layout but having issues styling and also not sure how to create the counter on the left. I assume I need to get the height of each h1 and then move it down by that height..

Here is the 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>

And here is the 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;
                }
            }
}

And here is the 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;

The height for each h1 tag isn't working, how to fix this or is there another approach? To add, clientHeight gives me a value of 0 And also: getBoundingClientRect() gives height value of 0 as well.

Thank you.

Answer 1

Use getBoundingClientRect():

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

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

In your case:

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

To include the top and bottom margins use:

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

The reason why you're getting 0 right now when trying to calculate the height of the h1 tag is because your CSS sets the .count-num-item selector to have a line-height of 0:

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

You should use clientHeight attr for this:

this.h1Test.clientHeight

Answer 3

the code works in http://jsfiddle.net/o25dfz7j/1/.

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