예를 들어,<div>브라우저의 디스플레이(뷰포트) 가운데에 두고 싶다.이를 위해, 나는 폭과 높이를 계산할 필요가 있다.<div>요소.
뭘로 할까요?브라우저 호환성에 대한 정보를 포함하십시오.
질문에 대한 답변
및 속성을 사용해야 합니다.주의: 이들은 엘리먼트에 속하지 않습니다..style.
var width = document.getElementById('foo').offsetWidth; 함수는 CSS 변환을 수행한 후 요소의 치수와 위치를 부동소수점 숫자로 반환합니다.
> console.log(document.getElementById('foo').getBoundingClientRect()) DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3, } 를 참조해 주세요.
이 메서드는 다음을 포함하는 개체를 반환합니다.width,height기타 유용한 값:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320 } 예:
var element = document.getElementById('foo'); var positionInfo = element.getBoundingClientRect(); var height = positionInfo.height; var width = positionInfo.width; 이 문제는 없는 것 같습니다..offsetWidth그리고..offsetHeight그들이 가끔 돌아오는 곳에서 하다0(여기 코멘트 참조)
또 다른 차이점은getBoundingClientRect()부분 픽셀을 반환할 수 있습니다..offsetWidth그리고..offsetHeight가장 가까운 정수로 반올림합니다.
IE8 주의:getBoundingClientRectIE8 이하에서는 높이와 폭이 반환되지 않습니다.*
IE8을 지원해야 하는 경우.offsetWidth그리고..offsetHeight:
var height = element.offsetHeight; var width = element.offsetWidth; 이 메서드에 의해 반환된 객체는 실제로는 일반 객체가 아닙니다.속성은 열거할 수 없습니다(예:Object.keys즉시 사용할 수 없습니다.)
자세한 내용은 이쪽:ClientRect/DomRect를 플레인 객체로 변환하는 최선의 방법
레퍼런스:
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
메모: 이 답변은 2008년에 작성되었습니다. 당시 대부분의 사람들에게 최고의 크로스 브라우저 솔루션은 jQuery를 사용하는 것이었습니다. 후세를 위해 여기에 답을 남깁니다. 만약 jQuery를 사용한다면, 이것은 좋은 방법입니다. 다른 프레임워크나 순수 JavaScript를 사용하고 있다면 아마도 받아들여진 답변이 최선의 선택일 것입니다.
jQuery 1.2.6에서는 핵심 CSS 기능 중 하나를 사용할 수 있습니다.height그리고.width(또는outerHeight그리고.outerWidth(필요에 따라서).
var height = $("#myDiv").height(); var width = $("#myDiv").width();
var docHeight = $(document).height(); var docWidth = $(document).width(); 누구에게나 도움이 될까봐 텍스트 박스, 버튼, div를 모두 같은 css로 넣었습니다.
width:200px; height:20px; border:solid 1px #000; padding:2px;
<input id="t" type="text" /> <input id="b" type="button" /> <div
id="d"></div> 크롬, 파이어폭스, ie-edge로 시도했고, jquery로 시도했고, jquery를 사용하거나 사용하지 않고 시도했습니다.box-sizing:border-box. 항상 함께<!DOCTYPE html>
결과:
Firefox
Chrome
IE-Edge
with
w/o
with
w/o
with
w/o
box-sizing
$("#t").width()
194
200
194
200
194
200 $("#b").width()
194
194
194
194
194
194 $("#d").width()
194
200
194
200
194
200
$("#t").outerWidth()
200
206
200
206
200
206 $("#b").outerWidth()
200
200
200
200
200
200 $("#d").outerWidth()
200
206
200
206
200
206
$("#t").innerWidth()
198
204
198
204
198
204 $("#b").innerWidth()
198
198
198
198
198
198 $("#d").innerWidth()
198
204
198
204
198
204
$("#t").css('width')
200px
200px
200px
200px
200px
200px $("#b").css('width')
200px
200px
200px
200px
200px
200px $("#d").css('width')
200px
200px
200px
200px
200px
200px
$("#t").css('border-left-width')
1px
1px
1px
1px
1px
1px $("#b").css('border-left-width')
1px
1px
1px
1px
1px
1px $("#d").css('border-left-width')
1px
1px
1px
1px
1px
1px
$("#t").css('padding-left')
2px
2px
2px
2px
2px
2px $("#b").css('padding-left')
2px
2px
2px
2px
2px
2px $("#d").css('padding-left')
2px
2px
2px
2px
2px
2px
document.getElementById("t").getBoundingClientRect().width
200
206
200
206
200
206 document.getElementById("b").getBoundingClientRect().width
200
200
200
200
200
200 document.getElementById("d").getBoundingClientRect().width
200
206
200
206
200
206
document.getElementById("t").offsetWidth
200
206
200
206
200
206 document.getElementById("b").offsetWidth
200
200
200
200
200
200 document.getElementById("d").offsetWidth
200
206
200
206
200
206 offsetWidth그리고.offsetHeight“표시되는 컨텐츠의 폭, 스크롤 바(있는 경우), 패딩 및 테두리를 포함하여 요소가 차지하는 총 공간 크기”를 반환합니다.
clientWidth그리고.clientHeight반환 “패딩은 포함하지만 테두리, 여백 또는 스크롤 바는 포함하지 않는 실제 표시된 콘텐츠가 차지하는 공간”
scrollWidth그리고.scrollHeight“현재 표시되는 콘텐츠의 양에 관계없이 콘텐츠의 크기를 반환합니다.”
따라서 측정된 내용이 현재 표시 가능 영역을 벗어날 것으로 예상되는지 여부에 따라 달라집니다.