요소의 렌더링 된 높이를 어떻게 얻습니까?
요소의 렌더링 된 높이를 어떻게 얻습니까?
<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()
나는 이것을 사용한다 :
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 메소드 목록을 읽지 않았다면 살펴보십시오.
JQuery가 필요없는 간단한 코드를 만들었고 아마도 일부 사람들을 도울 것입니다. 로드 후 'ID1'의 총 높이를 가져 와서 'ID2'에서 사용합니다.
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
그런 다음 본체를로드하도록 설정하십시오.
<body onload='anyName()'>
흠 우리는 요소 지오메트리를 얻을 수 있습니다 ...
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);
이 평범한 JS는 어떻습니까?
이것이 답입니까?
"무엇을 계산해야하지만 표시하지 않으면 요소를 visibility:hiddenand로 설정하고 position:absoluteDOM 트리에 추가하고 offsetHeight를 가져 와서 제거하십시오 (이것은 프로토 타입 라이브러리가 마지막으로 확인했을 때 줄 뒤에서 수행하는 작업입니다)."
여러 요소에 대해 동일한 문제가 있습니다. 사이트에서 사용할 jQuery 또는 Prototype은 없지만 작동하는 경우 기술을 빌리는 것을 선호합니다. 작동하지 않은 몇 가지 예를 들어 다음과 같은 코드가 있습니다.
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
기본적으로 모든 것을 시도하여 결과를 얻지 못합니다. 영향을 미치지 않는 ClientHeight. 문제 요소를 사용하면 일반적으로 기본에서 NaN을 얻고 오프셋 및 스크롤 높이에서 0을 얻습니다. 그런 다음 Add DOM 솔루션과 clientRects를 시도하여 여기에서 작동하는지 확인했습니다.
2011 년 6 월 29 일, 필자는 예상보다 더 나은 결과로 DOM과 clientHeight에 모두 추가하기 위해 실제로 코드를 업데이트했습니다.
1) clientHeight도 0이었습니다.
2) 돔은 실제로 나에게 높이를 주었다.
3) ClientRects는 DOM 기술과 거의 동일한 결과를 반환합니다.
추가 된 요소는 본질적으로 유동적이기 때문에 빈 DOM Temp 요소에 추가 될 때 해당 컨테이너의 너비에 따라 렌더링됩니다. 결국 이상으로 30px 더 짧기 때문에 이상합니다.
높이를 다르게 계산하는 방법을 보여주기 위해 몇 가지 스냅 샷을 추가했습니다. 
높이 차이는 분명합니다. 절대 위치를 추가하고 숨길 수는 있지만 아무런 영향을 미치지 않습니다. 나는 이것이 작동하지 않을 것이라고 확신했다!
(더 멀어짐) 높이는 실제 렌더링 높이보다 낮습니다 (렌더링). 이것은 기존의 부모와 일치하도록 DOM Temp 요소의 너비를 설정하여 해결할 수 있으며 이론적으로 상당히 정확하게 수행 할 수 있습니다. 또한 제거하고 기존 위치에 다시 추가하여 어떤 결과가 발생하는지 알 수 없습니다. 그들이 innerHTML 기술을 통해 도착했을 때 나는이 다른 접근법을 사용하여 찾고 있습니다.
* 그러나 * 그 중 어느 것도 필요하지 않았습니다. 실제로 그것은 광고 된대로 작동하고 올바른 높이를 반환했습니다!
메뉴를 다시 볼 수 있었을 때 DOM은 페이지 상단 (279px)의 유동 레이아웃에 따라 올바른 높이를 반환했습니다. 위의 코드는 또한 280px를 반환하는 getClientRects를 사용합니다.
이는 다음 스냅 샷에 설명되어 있습니다 (한 번 작업 한 후에 Chrome에서 가져옴).
이제 프로토 타입 트릭이 왜 작동하는지 전혀 알지 못합니다. 또는 getClientRects도 작동합니다.
이러한 특정 요소에 대한이 모든 문제의 원인은 appendChild 대신 innerHTML을 사용하는 것으로 의심되지만이 시점에서는 순수한 추측입니다.
offsetHeight보통.
무언가를 계산해야하지만 표시하지 않으면 요소를 visibility:hiddenand로 설정 position:absolute하고 DOM 트리에 추가하고를 가져 와서 offsetHeight제거하십시오. (마지막으로 확인했을 때 프로토 타입 라이브러리가 장면 뒤에서 수행하는 작업입니다).
작성한 요소가 아직 Dom에서 렌더링되지 않았기 때문에 offsetHeight가 0을 반환하는 경우가 있습니다. 그런 상황 에서이 기능을 작성했습니다.
function getHeight(element)
{
var e = element.cloneNode(true);
e.style.visibility = "hidden";
document.body.appendChild(e);
var height = e.offsetHeight + 0;
document.body.removeChild(e);
e.style.visibility = "visible";
return height;
}
document.querySelector('.project_list_div').offsetHeight;
이미 jQuery를 사용하고 있다면 가장 좋은 방법은 .outerHeight()또는 .height()입니다.
jQuery가 없으면 사용중인 상자 크기를 확인하고 다양한 패딩 + borders + clientHeight를 추가 하거나 getComputedStyle 을 사용할 수 있습니다 .
var h = getComputedStyle (document.getElementById ( 'someDiv')). height;
h 이제 "53.825px"와 같은 문자열이됩니다.
그리고 참조를 찾을 수는 없지만 getComputedStyle()비용이 많이들 수 있다고 생각 하므로 각 window.onscroll이벤트 에서 호출하려는 것이 아닐 수도 있습니다 (그러나 jQuery도 마찬가지입니다 height()).
MooTools로 :
$ ( 'someDiv'). getSize (). y
귀하의 질문을 올바르게 이해했다면 다음과 같은 것이 도움이 될 것입니다.
function testDistance(node1, node2) {
/* get top position of node 1 */
let n1Pos = node1.offsetTop;
/* get height of node 1 */
let n1Height = node1.clientHeight;
/* get top position of node 2 */
let n2Pos = node2.offsetTop;
/* get height of node 2 */
let n2Height = node2.clientHeight;
/* add height of both nodes */
let heightTogether = n1Height + n2Height;
/* calculate distance from top of node 1 to bottom of node 2 */
let actualDistance = (n2Pos + n2Height) - n1Pos;
/* if the distance between top of node 1 and bottom of node 2
is bigger than their heights combined, than there is something between them */
if (actualDistance > heightTogether) {
/* do something here if they are not together */
console.log('they are not together');
} else {
/* do something here if they are together */
console.log('together');
}
}
CSS의 높이를 구체적으로 설정 했습니까? 당신이 offsetHeight;아니라 오히려 사용할 필요가없는 경우height
var h = document.getElementById('someDiv').style.offsetHeight;
참고 URL : https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element
'development' 카테고리의 다른 글
| 안드로이드에서 상태 표시 줄 색상을 변경하는 방법 (0) | 2020.02.28 |
|---|---|
| 명령 행에서 사용하는 php.ini 파일을 찾는 방법? (0) | 2020.02.28 |
| 소스 코드에서 가장 좋은 주석은 무엇입니까? (0) | 2020.02.28 |
| 참조 대 포인터를 사용하는 경우 (0) | 2020.02.28 |
| Gadaffi를 검색하는 정규식 (0) | 2020.02.28 |