Html 요소의 실제 너비와 높이를 가져오는 js 메서드

다음 편집기는 Html 요소의 실제 너비와 높이를 얻는 js 메서드를 제공합니다. 편집자님이 꽤 좋다고 하셔서 지금 공유하고 참고용으로 드리고 싶습니다. 에디터를 따라가서 살펴볼까요

첫 번째 경우는 #p1{width:120px;}처럼 스타일 시트에 너비와 높이가 모두 적혀 있는 경우입니다. 이 경우 #p1.style.width를 통해서는 너비를 얻을 수 없고, #p1.offsetWidth를 통해서는 너비를 얻을 수 있다.

두 번째 경우는 style="width:120px;"처럼 너비와 높이가 인라인으로 작성되는 경우입니다. 이 경우 위의 두 가지 방법을 통해 너비를 얻을 수 있습니다.

요약하자면, id.offsetWidth와 id.offsetHeight는 스타일 시트에 작성하든 인라인에 작성하든 관계없이 요소의 너비와 높이를 얻을 때 이 두 속성을 사용하는 것이 가장 좋습니다. 속성이 인라인 스타일로 작성되지 않으면 id.style.atrr을 통해 가져올 수 없습니다.

요즘 프론트엔드 프로덕션에서는 스타일을 스타일 시트에 직접 작성하는 경우가 거의 없습니다. 가져오려는 스타일에 해당 스타일이 없으면(#p1.style.width가 #p1.offsetWidth에 해당하는 것처럼), 브라우저를 사용하지 않고 별도로 스타일 시트의 속성만 가져올 수 있습니다. "JS Get Style" 속성" 등에 대해 설명합니다.

코드:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

관련 권장 사항:

js+html5로 페이지 새로 고침 가능 카운트다운 효과 구현

위 내용은 Html 요소의 실제 너비와 높이를 가져오는 js 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!