일반 JavaScript로 div 높이 얻기

jQuery를 사용하지 않고 div의 높이를 얻는 방법에 대한 아이디어가 있습니까?

이 질문에 대한 스택 오버플로를 검색하고 있었고 모든 답변이 jQuery를 가리키는 것 같습니다 .height().

내가 좋아하는 뭔가를 시도 myDiv.style.height내 사업부가 있었다하더라도,하지만 아무것도 반환 width및 heightCSS에서 설정합니다.

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

또는

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

clientHeight 패딩을 포함합니다.

offsetHeight 패딩, scrollBar 및 테두리를 포함합니다.

jsFiddle

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

또 다른 옵션은 getBoundingClientRect 함수를 사용하는 것입니다. 요소의 표시가 '없음'인 경우 getBoundingClientRect는 빈 rect를 반환합니다.

예:

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

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

clientHeight와 clientWidth는 당신이 찾고있는 것입니다.

offsetHeight 및 offsetWidth도 높이와 너비를 반환하지만 테두리와 스크롤 막대를 포함합니다. 상황에 따라 둘 중 하나를 사용할 수 있습니다.

도움이 되었기를 바랍니다.

다른 답변은 나를 위해 작동하지 않았습니다. 여기 에 및 / 또는 세트 가 있다고 가정 할 때 w3schools 에서 찾은 것이 있습니다.divheightwidth

당신이 필요로하는 것입니다 height및 width패딩을 제외 할 수 있습니다.

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

당신은 downvoters : 이 답변은 내가받은 upvotes에 의해 판단하여 적어도 5 명을 도왔습니다. 마음에 들지 않으면 내가 고칠 수있는 이유를 말해주세요. 그것은 downvotes를 가진 나의 가장 큰 애완 동물 peeve입니다; 당신은 왜 당신이 그것을 내리는지를 거의 말하지 않습니다.

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

JS 피들

el.clientHeight및에 추가 하여 요소 자체에 설정된 높이에 관계없이 요소 내부의 내용 높이가el.offsetHeight 필요할 때을 사용할 수 있습니다 el.scrollHeight. 더 많은 정보

요소 높이 또는 최대 높이를 내부 동적 컨텐츠의 정확한 높이로 설정하려는 경우 유용 할 수 있습니다. 예를 들면 다음과 같습니다.

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

시험

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

대안이 하나 더 있습니다.

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

    }

하나의 옵션은

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