Verkrijg div-hoogte met gewoon JavaScript

Enig idee hoe je de hoogte van een div kunt krijgen zonder jQuery te gebruiken?

Ik was op Stack Overflow aan het zoeken voor deze vraag en het lijkt erop dat elk antwoord verwijst naar jQuery’s .height().

Ik heb iets geprobeerd als myDiv.style.height, maar het leverde niets op, zelfs niet toen mijn div de widthen heighthad ingesteld in CSS.

Antwoord 1, autoriteit 100%

var clientHeight = document.getElementById('myDiv').clientHeight;

of

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeightbevat opvulling.

offsetHeightbevat opvulling, schuifbalk en randen.

Antwoord 2, autoriteit 5%

Een andere optie is om de functie getBoundingClientRect te gebruiken. Houd er rekening mee dat getBoundingClientRect een lege rect retourneert als de weergave van het element ‘none’ is.

Voorbeeld:

var elem = document.getElementById("myDiv");
if(elem) {
  var rect = elem.getBoundingClientRect();
  console.log("height: " + rect.height);  
}

UPDATE:
Hier is dezelfde code geschreven in 2020:

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}

Antwoord 3, autoriteit 3%

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Antwoord 4, autoriteit 2%

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight en clientWidth zijn wat u zoekt.

offsetHeight en offsetWidth retourneren ook de hoogte en breedte, maar bevatten de rand en schuifbalk. Afhankelijk van de situatie kun je de een of de ander gebruiken.

Hopelijk helpt dit.

Antwoord 5

De andere antwoorden werkten niet voor mij. Dit is wat ik vond op w3schools, ervan uitgaande dat de diveen heighten/of widthingesteld.

Je hebt alleen heighten widthnodig om opvulling uit te sluiten.

   var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

Jullie downvoters:dit antwoord heeft ten minste 5 mensen geholpen, te oordelen naar de upvotes die ik heb ontvangen. Als je het niet leuk vindt, vertel me dan waarom, zodat ik het kan repareren. Dat is mijn grootste ergernis met downvotes; je vertelt me zelden waarom je het downvote.

Antwoord 6

In aanvulling op el.clientHeighten el.offsetHeight, wanneer u de hoogte van de inhoud binnen het element(ongeacht de hoogte ingesteld op het element zelf) kunt u el.scrollHeightgebruiken. meer informatie

Dit kan handig zijn als u de elementhoogte of max-height wilt instellen op de exacte hoogte van de interne dynamische inhoud. Bijvoorbeeld:

var el = document.getElementById('myDiv')
el.style.maxHeight = el.scrollHeight+'px'

Antwoord 7

probeer

myDiv.offsetHeight 

Antwoord 8

Hier is nog een alternatief:

var classElements = document.getElementsByClassName("className");
function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }
    }

Antwoord 9

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Antwoord 10

Een optie zou zijn

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);

Antwoord 11

javascript hoogteberekening

opvulling opnemen

gebruik clientHeight

element.clientHeight

gebruik offsetHeight

opvulling,randen,borderbreedte opnemen

element.offsetHeight

gebruik el.style.height

Het retourneert alleen de opgegeven hoogte (moet handmatige hoogte hebben, bijvoorbeeld: <div style="height:12px"></div>anders retourneert het een leeg resultaat

element.style.height

gebruik getBoundingClientRect

inclusief opvulling,border,borderbreedte

elem.getBoundingClientRect();
elem.height