HTML 요소의 실제 너비와 높이를 어떻게 검색합니까? 싶다고 가정하십시오 . 그렇게하려면 <div>요소 의 너비와

<div>브라우저의 디스플레이 (뷰포트)를 중심으로하고 싶다고 가정하십시오 . 그렇게하려면 <div>요소 의 너비와 높이를 계산해야합니다 .

무엇을 사용해야합니까? 브라우저 호환성에 대한 정보를 포함하십시오.

답변

.offsetWidth및 .offsetHeight속성을 사용해야합니다 . 그것들은 요소가 아닌 요소에 속합니다 .style.

var width = document.getElementById('foo').offsetWidth;

기능.getBoundingClientRect() CSS의 변환을 수행 한 후 부동 소수점 수로서 측정 소자의 위치를 반환한다.

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

답변

살펴보십시오 Element.getBoundingClientRect().

이 방법은 포함하는 객체 반환 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 참고 : IE8 이하에서는 getBoundingClientRect높이와 너비를 반환하지 않습니다 . *

IE8을 지원 해야하는 경우 .offsetWidthand를 사용하십시오 .offsetHeight.

var height = element.offsetHeight;
var width = element.offsetWidth;

이 메소드에 의해 리턴 된 Object가 실제로는 정상적인 오브젝트 가 아님을 주목할 가치가 있습니다. 속성을 열거 할 수 없습니다 (예 : 기본적으로Object.keys 작동하지 않음).

여기에 대한 자세한 정보 :
ClientRect / DomRect를 일반 객체로 변환하는 가장 좋은 방법

참고:

답변

참고 : 이 답변은 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를 사용하거나 사용하지 않고 시도했지만 사용 여부에 관계없이 시도했습니다 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

답변

MDN 에 따르면 : 요소의 크기 결정

offsetWidth및 offsetHeight“가시 콘텐츠의 폭, 스크롤바, 패딩 및 경계를 포함하여, 요소가 차지하는 공간의 총량의”을 반환

clientWidth그리고 clientHeight“얼마나 많은 공간이 실제 표시 내용이 테두리, 여백, 스크롤바를 차지 패딩을 포함하지만 포함하지 않음”을 반환

scrollWidth그리고 scrollHeight“그것의 많은 부분이 현재 표시 방법에 관계없이, 내용의 실제 크기의”를 반환

따라서 측정 된 내용이 현재 볼 수있는 영역을 벗어날 것으로 예상되는지 여부에 따라 다릅니다.

답변

IE7 및 이전 버전에서만 계산해야합니다 (콘텐츠의 크기가 고정되어 있지 않은 경우에만). CSS 조건을 지원하지 않는 오래된 IE로 해킹을 제한하기 위해 HTML 조건부 주석을 사용하는 것이 좋습니다. 다른 모든 브라우저의 경우 다음을 사용하십시오.

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

이것은 완벽한 솔루션입니다. <div>모든 크기의 중심 에 있으며 내용물의 크기에 맞게 줄 바꿈합니다.

답변

요소 스타일을 수정하는 것은 쉽지만 값을 읽는 것은 까다 롭습니다.

Javascript에서 내장 메소드 호출 getComputedStyle을 사용하지 않으면 JavaScript는 css (internal / external)에서 오는 요소 스타일 특성 (elem.style)을 읽을 수 없습니다.

getComputedStyle (요소 [, 의사])

요소 : 값을 읽을 요소입니다.
의사 : 필요한 경우 의사 요소입니다 (예 : :: before). 빈 문자열이거나 인수가 없으면 요소 자체를 의미합니다.

결과는 elem.style과 같은 스타일 속성을 가진 객체이지만 이제 모든 CSS 클래스와 관련이 있습니다.

예를 들어 여기 스타일에는 여백이 표시되지 않습니다.

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

너비 / 높이 또는 기타 속성을 얻으려는 요소의 getComputedStyle을 포함하도록 JavaScript 코드를 수정했습니다.

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

계산 및 해결 된 값

CSS에는 두 가지 개념이 있습니다.

계산 된 스타일 값은 CSS 캐스케이드의 결과로 모든 CSS 규칙 및 CSS 상속이 적용된 후의 값입니다. height : 1em 또는 font-size : 125 %처럼 보일 수 있습니다.

해석 된 스타일 값은 요소에 마지막으로 적용되는 값입니다. 1em 또는 125 %와 같은 값은 상대적입니다. 브라우저는 계산 된 값을 가져와 모든 단위를 고정 및 절대로 만듭니다 (예 : height : 20px 또는 font-size : 16px). 지오메트리 속성의 경우 확인 된 값은 width : 50.5px와 같은 부동 소수점을 가질 수 있습니다.

오래 전 getComputedStyle은 계산 된 값을 얻기 위해 만들어졌지만 확인 된 값이 훨씬 더 편리하고 표준이 변경되었습니다.
따라서 현재 getComputedStyle은 실제로 특성의 해석 된 값을 리턴합니다.

참고 사항 :

getComputedStyle에는 전체 속성 이름이 필요합니다

paddingLeft 또는 높이 또는 너비와 같이 원하는 속성을 항상 요청해야합니다. 그렇지 않으면 올바른 결과가 보장되지 않습니다.

예를 들어, paddingLeft / paddingTop 속성이 있으면 getComputedStyle (elem) .padding에 대해 무엇을 얻어야합니까? 알려진 패딩에서 “생성 된”값이 없습니까? 여기에는 표준 규칙이 없습니다.

다른 불일치가 있습니다. 예를 들어, 일부 브라우저 (Chrome)는 아래 문서에 10px를 표시하고 일부 브라우저 (Firefox)는 다음을 수행하지 않습니다.

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

자세한 내용은 https://javascript.info/styles-and-classes