요소의 렌더링 된 높이를 어떻게 얻습니까?
<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 포함 된 문서의 높이 (스크롤의 경우 높이보다 커야 함), 세로 패딩 및 세로 테두리가 포함됩니다.
.clientWidth/.clientHeight 너비를 포함시키지 마십시오 . 당신이 포함되어야 스크롤 폭을하려는 경우, 사용할 수있는 element.getBoundingClientRect().width 대신에
이 답변의 맨 위에 사용 되는 링크가 많기 때문에 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()
확실히 사용
$('#someDiv').height() // to read it또는
$('#someDiv').height(newHeight) // to set it방금 배운 몇 가지 중요한 사항이 있기 때문에 이것을 추가 답변으로 게시하고 있습니다.
나는 offsetHeight를 사용하여 거의 함정에 빠졌습니다. 이것이 일어난 일입니다.
그중 일부는 다음과 같습니다.
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 메소드 목록을 읽지 않았다면 살펴보십시오.
document.querySelector('.project_list_div').offsetHeight;elem.getBoundingClientRect().height
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는 어떻습니까?
var geometry; geometry={};간단하게 할 수있다var geometry={};
2020 년에 이것을 수행하는 가장 좋은 방법은 일반 js를 사용하는 것입니다. getBoundingClientRect().height;
여기에 예가 있습니다
let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;
console.log(`Div Height: ${divHeight}`);<div>
How high am I? 🥴
</div>지고의 위에 height이런 식으로, 우리는 또한에 대한 기타 물건의 무리에 액세스 할 수 있습니다 div.
let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();
console.log(divInfo);<div>What else am I? 🥴</div>이것이 답입니까?
"무엇을 계산해야하지만 표시하지 않으면 요소를 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;
}이미 jQuery를 사용하고 있다면 가장 좋은 방법은 .outerHeight()또는 .height()입니다.
jQuery가 없으면 사용중인 상자 크기를 확인하고 다양한 패딩 + 테두리 + clientHeight를 추가 하거나 getComputedStyle을 사용할 수 있습니다 .
var h = getComputedStyle (document.getElementById ( 'someDiv')). height;
h 이제 "53.825px"와 같은 문자열이됩니다.
그리고 참조를 찾을 수는 없지만 getComputedStyle()비용이 많이들 수 있다고 생각 하므로 각 window.onscroll이벤트 에서 호출하려는 것이 아닐 수도 있습니다 (그러나 jQuery도 마찬가지입니다 height()).
getComputedStyle되면을 사용 parseInt(h, 10)하여 계산을위한 정수를 얻습니다.
귀하의 질문을 올바르게 이해했다면 다음과 같은 것이 도움이 될 것입니다.
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');
}
}