요소의 렌더링 된 높이를 어떻게 얻습니까?
<div>내부에 내용이 들어 있는 요소 가 있다고 가정 해 봅시다 . 이 내용은의 높이를 늘리려 고합니다 <div>. 명시 적으로 높이를 설정하지 않은 경우 “렌더링 된”높이를 얻는 방법 분명히, 나는 시도했다 :
var h = document.getElementById('someDiv').style.height;이를위한 트릭이 있습니까? 도움이된다면 jQuery를 사용하고 있습니다.
답변
그냥 있어야
$('#someDiv').height();jQuery와 함께. 랩핑 된 세트에서 첫 번째 항목의 높이를 숫자로 검색합니다.
사용하려고
.style.height처음에 속성을 설정 한 경우에만 작동합니다. 별로 유용하지 않습니다!
답변
다음 중 하나를 시도하십시오.
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;clientHeight 높이와 수직 패딩을 포함합니다.
offsetHeight 높이, 세로 패딩 및 세로 테두리가 포함됩니다.
scrollHeight 포함 된 문서의 높이 (스크롤의 경우 높이보다 커야 함), 세로 패딩 및 세로 테두리가 포함됩니다.
답변
이 답변의 맨 위에 사용 되는 링크가 많기 때문에 NON JQUERY …elem.style.height
내부 높이 :
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;외부 높이 :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight; 또는 내가 가장 좋아하는 참조 중 하나 : http://youmightnotneedjquery.com/
답변
.outerHeight()이 목적으로 사용할 수 있습니다 .
요소의 전체 렌더링 높이를 제공합니다. 또한 css-height요소 를 설정할 필요가 없습니다 . 예방을 위해 높이를 자동으로 유지하여 콘텐츠 높이에 따라 렌더링 할 수 있습니다.
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);이러한 기능을 명확하게 보려면 jQuery 사이트 또는 자세한 게시물을 참조하십시오 .
는 웁니다 차이 사이를 .height()/ innerHeight()/outerHeight()
답변
이것을 사용하여 요소의 높이를 얻습니다 (float 반환) :
document.getElementById('someDiv').getBoundingClientRect().height가상 DOM 을 사용할 때도 작동 합니다 . Vue에서 다음과 같이 사용합니다.
this.$refs['some-ref'].getBoundingClientRect().height답변
style = window.getComputedStyle(your_element);그런 다음 간단히 : style.height
답변
확실히 사용
$('#someDiv').height() // to read it또는
$('#someDiv').height(newHeight) // to set it방금 배운 몇 가지 중요한 사항이 있기 때문에 이것을 추가 답변으로 게시하고 있습니다.
나는 offsetHeight를 사용하여 거의 함정에 빠졌습니다. 이것이 일어난 일입니다.
- 디버거를 사용하는 좋은 오래된 트릭을 사용하여 요소의 속성을 ‘보고’
- 나는 내가 기대했던 가치를 중심으로 가치가있는 것을 보았습니다.
- 그것은 offsetHeight였습니다-그래서 나는 그것을 사용했습니다.
- 그런 다음 숨겨진 DIV와 함께 작동하지 않는다는 것을 깨달았습니다.
- maxHeight를 계산 한 후에 숨기려고했지만 어색해 보였습니다.
- 검색을 수행하고 jQuery.height ()를 발견하여 사용했습니다.
- 숨겨진 요소에서도 작동하는 height ()
- 재미를 위해 높이 / 폭의 jQuery 구현을 확인했습니다.
그중 일부는 다음과 같습니다.
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 네, 스크롤과 오프셋을 모두 봅니다. 실패하면 브라우저 및 CSS 호환성 문제를 고려하여 훨씬 더 보입니다. 다시 말해서 학생에 대해 걱정하지 마십시오.
그러나 나는 할 필요가 없습니다. 감사합니다 jQuery!
이야기의 도덕 : jQuery에 적절한 이유가있을 수있는 방법이 있다면 호환성과 관련이있을 수 있습니다.
최근에 jQuery 메소드 목록을 읽지 않았다면 살펴보십시오.
