지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 다양한 시나리오_javascript 기술에서 요소 너비 및 높이에 대한 구현 코드 얻기

다양한 시나리오_javascript 기술에서 요소 너비 및 높이에 대한 구현 코드 얻기

WBOY
풀어 주다： 2016-05-16 18:02:22
원래의
1244명이 탐색했습니다.

시나리오 1, 요소 스타일 속성이 너비/높이로 설정됨

코드 복사 코드는 다음과 같습니다.

< ;div style="width:100px;">test

<script> <br>var div = document.getElementsByTagName('div')[0]; (div.style.width); <br></script>

위와 같이 el.style.width를 사용하세요. style 속성에 width가 설정되어 있지 않으면 다음과 같이 el.style.width를 사용하여 얻을 수 없습니다.

코드 복사 코드는 다음과 같습니다.
test

<script> var div = document.getElementsByTagName('div')[0]; >alert(div.style.width); <br></script>


모든 브라우저에 빈 문자열이 나타납니다. 스타일이 페이지의 CSS에 삽입되어 있어도 여전히 얻을 수 없습니다.


코드를 복사하세요 코드
test
script>
var div = document .getElementsByTagName('div')[0]
alert(div.style.width)


이번에는 getCompulatedStyle 또는 currentStyle이 유용할 것입니다.
시나리오 2, 요소는 스타일 시트를 도입하여 너비/높이를 설정합니다.
스타일 시트를 도입하는 방법에는 두 가지가 있습니다. 하나는 링크 태그를 사용하여 별도의 CSS 파일을 도입하는 것이고, 다른 하나는 스타일 태그를 HTML 페이지에 직접 추가하세요. 여기서는 두 번째 테스트 방법이 사용됩니다. 다음과 같습니다



코드를 복사합니다
코드는 다음과 같습니다. 코드를 복사합니다


코드는 다음과 같습니다.
test< div> <script> </u>function getStyle(el, name) { </a>if(window.getCompulatedStyle) { </span>return window.getCompulatedStyle(el, null) </div>}else; 🎜>return el.<div class="codebody" id="code2181">} <br>} <br>var div = document.getElementsByTagName('div')[0] <br>alert(getStyle(div, 'width')); ></script&gt ; <br><br> <br>div는 스타일 속성을 설정하지도 않고 스타일 시트를 도입하지도 않습니다. 너비와 높이(브라우저 기본값)는 Firefox/IE9/Safari/Chrome/Opera에서 얻을 수 있지만 IE6/7/8에서는 얻을 수 없으며 auto가 반환됩니다. <br>여기서 getStyle 메소드는 getCompulatedStyle을 먼저 사용하며 IE9에서는 이미 이 메소드를 지원합니다. 따라서 너비와 높이는 IE9에서 얻을 수 있습니다. 그러나 IE6/7/8은 이를 지원하지 않으며 currentStyle을 통해서만 얻을 수 있습니다. <br>시나리오 3: 스타일 속성을 설정하지도 않고 스타일 시트를 도입하지도 않는 요소 <br><br><br><br><br>코드 복사 </div> <br><br> 코드는 다음과 같습니다. : <br><div class="codebody" id="code84427"> <br><div>테스트<div> <br><스크립트> <br>function getStyle(el,name) { <br>if(window.getCompulatedStyle) { <br>return window.getCompulatedStyle(el, null)[name]; <br>}else{ <br>return el.currentStyle[이름]; <br>} <br>} <br>function getWH(el, name) { <br>var val = name === "width" ? el.offsetWidth : el.offsetHeight, <br> which = name === "너비" ? ['왼쪽', '오른쪽'] : ['위쪽', '아래쪽']; <br>// 표시가 없음 <br>if(val === 0) { <br>return 0; <br>} <br>for(var i = 0, a; a = which[i ];) { <br>val -=parseFloat( getStyle(el, "border" a "Width") ) || 0; <br>val -=parseFloat( getStyle(el, "padding" a) ) || 0; <br>} <br>값 'px'를 반환합니다. <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getWH(div, '너비')); <br></script>

思路很简单: 获取元素의 오프셋 너비/오프셋 높이, 减去원素의 패딩 및 테두리.
이전 기사：TextArea는 최대 길이 솔루션(jquery)_jquery를 지원하지 않습니다. 다음 기사：JavaScript 고급 프로그래밍 이벤트 연구 노트_Javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿