[javascript] 바닐라 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();
        }


    }