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

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

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

시나리오 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으로 문의하세요.
저자별 최신 기사
최신 이슈
url-rewrite - nginx 디렉토리 이후의 슬래시 문제
에서 1970-01-01 08:00:00
0
0
0
개발 환경 서버인 Nginx는 정적 파일 캐시를 지울 수 없습니다.
에서 1970-01-01 08:00:00
0
0
0
Nginx에서 502 문제를 빠르게 찾는 방법
에서 1970-01-01 08:00:00
0
0
0
이러한 요구 사항을 달성하기 위해 nginx를 사용하는 방법은 무엇입니까?
에서 1970-01-01 08:00:00
0
0
0
504 - nginx + fastcgi + Django 자주 504
에서 1970-01-01 08:00:00
0
0
0
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿