바닐라 JavaScript를 사용하여 div의 폭을 구하는 방법은 무엇입니까?

바닐라 JavaScript를 사용하여 div의 폭을 구하는 방법은 무엇입니까?

의 현재 폭은 어떻게 찾습니까?<div>jQuery와 같은 라이브러리를 사용하지 않고 크로스 브라우저와 호환되도록 할 수 있습니까?

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, padding Left, 여백, border-top-left-radius 등입니다.

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

document.getElementsByClassName("myDiv")

어레이가 반환됩니다.만약 당신이 관심을 가지고 있는 특별한 자산이 있다면.예를 들어 다음과 같습니다.

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

divWidth이제 div 배열의 첫 번째 요소의 폭과 같아집니다.

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

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

사실, 당신은 그것을 사용할 필요가 없다.document.getElementById("mydiv").
다음과 같이 div의 ID를 사용할 수 있습니다.

var w = mydiv.clientWidth;
또는
var w = mydiv.offsetWidth;
기타.

div 또는 body tag on click="show(이벤트);" 함수 show(이벤트) {에서 아래 메서드를 호출합니다.

        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브라우저는 최대 부하가 수행될 때까지 렌더링되지 않으므로 너비 및 높이 값을 지정합니다.

언급URL : https://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div-using-vanilla-javascript