플레인 JavaScript로 div 높이 가져오기

플레인 JavaScript로 div 높이 가져오기

jQuery를 사용하지 않고 div의 키를 얻을 수 있는 방법이 있나요?

Stack Overflow에서 이 질문을 검색했는데 모든 답변이 jQuery를 가리키고 있는 것 같습니다..height().

이런 걸 해봤는데myDiv.style.height하지만 아무것도 돌려주지 않았어 심지어 내 div가 그것을 가지고 있었을 때도width그리고.heightCSS로 설정합니다.

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

또는

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

clientHeight에는 패딩이 포함되어 있습니다.

offsetHeight에는 패딩, 스크롤바 및 테두리가 포함됩니다.

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

예:

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

업데이트: 다음은 2020년에 작성된 코드입니다.

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

jsFiddle

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

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

client Height 및 client Width를 찾고 있습니다.

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

이게 도움이 됐으면 좋겠다.

다른 대답들은 나에게 효과가 없었다.여기 제가 w3schools에서 발견한 것이 있습니다.div가 있다height및/또는width세트.

필요한 건height그리고.width패딩을 제외합니다.

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

투표자 여러분:이 답변은 제가 받은 투표로 판단하건대 최소 5명에게 도움이 되었습니다.마음에 안 들면 이유를 말해. 내가 고칠 수 있게.그것은 다운 투표에 대한 나의 가장 큰 불만이다. 당신은 왜 다운 투표했는지 나에게 거의 말하지 않는다.

에 더하여el.clientHeight그리고.el.offsetHeight요소 내부의 콘텐츠 높이가 필요한 경우(요소 자체에 설정된 높이에 관계없이)를 사용할 수 있습니다.el.scrollHeight자세한 것은 이쪽

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

var el = document.getElementById('myDiv')

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

1. HTMlement.style - 정의된 요소의 스타일을 반환합니다.
2. client Height - 높이 + 패딩
3. 오프셋 높이 - 높이 + 패딩 + 테두리
4. 스크롤 높이 - 반환 높이 + 패딩
5. getBounding ClientRect() - 왼쪽, 위쪽, 오른쪽, 아래쪽, x, y, 너비 및 높이 속성을 반환합니다.
6. getComputedStyle() - 요소의 모든 CSS 속성을 반환합니다.

// returns defined Style of element
const styleHeight = document.getElementById('myDiv').style.height;
console.log('style Height : ', styleHeight);

// height + padding
const clientHeight = document.getElementById('myDiv').clientHeight;
console.log('client Height : ', clientHeight);

// height + padding + borders
const offsetHeight = document.getElementById('myDiv').offsetHeight;
console.log('offset Height : ', offsetHeight);

// height + padding
const scrollHeight = document.getElementById('myDiv').scrollHeight;
console.log('scroll Height : ', scrollHeight);

// return left, top, right, bottom, x, y, width, and height properties
const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);

// returns all CSS properties of an element
const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height;
console.log('style Element Height : ', styleElementHeight);

<div id="myDiv" style="margin:10px;padding:20px;height:200px;">
    <input type="Text">
    <input type="button" value="submit">
</div>

해라

myDiv.offsetHeight 

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

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

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

가장 좋은 방법은 -

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

var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width;
var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight  || (myDiv.getBoundingClientRect()).height;
          
console.log("Width: "+ myDivWidth + "px");
console.log("Height: "+ myDivHeight + "px");

<div style="padding: 50px; margin: 8px auto; outline: 1px solid green;">

  <div id="myDiv" style="width: 100%; height: 256px; padding: 50px; margin: 4px; background: #000000; color: #ffffff; outline: 1px solid red;">
  This is "#myDiv" <br>
  Width: 100% <br>
  Height: 256px
  </div>

</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);

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

Jsfiddle

자바스크립트 높이 계산

패딩을 포함하다

사용하다clientHeight

element.clientHeight

사용하다offsetHeight

padding, padding, border_width 포함

element.offsetHeight

사용하다el.style.height

지정된 높이만 반환합니다(수동 높이여야 함:<div style="height:12px"></div> 않으면 빈 됩니다.

element.style.height

getBoundingClientRect

패딩, border, border_width 포함

elem.getBoundingClientRect();
elem.height

언급URL : https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript