바닐라 JavaScript를 사용하여 div의 너비를 찾는 방법은 무엇입니까?

jQuery와 같은 라이브러리 를 사용 하지 않고<div> 브라우저 간 호환 가능한 방식으로 현재 너비를 어떻게 찾 습니까?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

clientWidth또는 사용할 수 있습니다offsetWidth Mozilla 개발자 네트워크 참조를

다음과 같습니다.

document.getElementById("yourDiv").clientWidth; // returns number, like 728

또는 테두리 너비가있는 경우 :

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

모든 답변은 옳지 만 여전히 다른 대안을 제시하고 싶습니다.

지정된 너비 (패딩, 여백 등 무시)를 찾고 있다면 사용할 수 있습니다.

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle을 사용하면 해당 요소의 모든 스타일에 액세스 할 수 있습니다. 예를 들면 : padding, paddingLeft, margin, border-top-left-radius 등.

ClassName을 사용하여 DOM을 검색 할 수도 있습니다. 예를 들면 다음과 같습니다.

document.getElementsByClassName("myDiv")

배열을 반환합니다. 관심있는 특정 속성이 하나있는 경우 예를 들면 다음과 같습니다.

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth 이제 div 배열의 첫 번째 요소 너비와 같습니다.

실제로을 사용할 필요는 없습니다 document.getElementById("mydiv") .
당신은 단순히 같은 사업부의 ID를 사용할 수 있습니다

var w = mydiv.clientWidth;
또는
var w = mydiv.offsetWidth;
등

또 다른 옵션은 getBoundingClientRect 함수를 사용하는 것입니다. 요소의 표시가 '없음'인 경우 getBoundingClientRect는 빈 사각형을 반환합니다.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

div 또는 body 태그에서 아래 메소드를 호출하십시오. onclick = "show (event);" 기능 쇼 (이벤트) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

계산 된 스타일을 얻는 올바른 방법은 페이지가 렌더링 될 때까지 기다리는 것입니다. 다음과 같은 방법으로 수행 할 수 있습니다. auto값 을 얻는 데 시간 종료에주의하십시오 .

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

그냥 사용하면

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

auto전체로드가 수행 될 때까지 브라우저가 렌더링되지 않기 때문에 너비 및 높이 값을 얻을 수 있습니다 .