다양한 시나리오_javascript 기술에서 요소 너비 및 높이에 대한 구현 코드 얻기
- WBOY원래의
- 2016-05-16 18:02:221170검색
시나리오 1, 요소 스타일 속성이 너비/높이로 설정됨
코드 복사 코드는 다음과 같습니다.
< ;div style="width:100px;">test
<script> <br>var div = document.getElementsByTagName('div')[0]; (div.style.width); <br></script>
코드 복사 코드는 다음과 같습니다.
test
<script> var div = document.getElementsByTagName('div')[0]; >alert(div.style.width); <br></script>
모든 브라우저에 빈 문자열이 나타납니다. 스타일이 페이지의 CSS에 삽입되어 있어도 여전히 얻을 수 없습니다.
<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 페이지에 직접 추가하세요. 여기서는 두 번째 테스트 방법이 사용됩니다. 다음과 같습니다
var div = document .getElementsByTagName('div')[0]
alert(div.style.width)
이번에는 getCompulatedStyle 또는 currentStyle이 유용할 것입니다.
시나리오 2, 요소는 스타일 시트를 도입하여 너비/높이를 설정합니다.
스타일 시트를 도입하는 방법에는 두 가지가 있습니다. 하나는 링크 태그를 사용하여 별도의 CSS 파일을 도입하는 것이고, 다른 하나는 스타일 태그를 HTML 페이지에 직접 추가하세요. 여기서는 두 번째 테스트 방법이 사용됩니다. 다음과 같습니다
코드를 복사합니다
코드는 다음과 같습니다.
코드는 다음과 같습니다.
test <script> <div class="codebody" id="code20743">function getStyle(el, name) { <br>if(창 .getCompulatedStyle) { <br>return window.getComputeStyle(el, null); <br>}else{ <br>return el.currentStyle; <br>} <br>var div = document.getElementsByTagName(' div')[0 ]; <br>alert(getStyle(div, 'width')); <br></script>
모든 브라우저에서 100px가 나타납니다. 스타일 시트에 정의된 요소의 너비와 높이는 getCompulatedStyle 및 currentStyle을 통해 얻을 수 있습니다.
요소의 너비와 높이가 스타일 속성이나 스타일 시트에 설정되지 않은 경우에도 getCompulatedStyle 또는 currentStyle을 사용하여 얻을 수 있나요? 대답은 getCompulatedStyle은 가능하지만 currentStyle은 불가능하다는 것입니다. 다음과 같습니다
코드를 복사합니다모든 브라우저에서 100px가 나타납니다. 스타일 시트에 정의된 요소의 너비와 높이는 getCompulatedStyle 및 currentStyle을 통해 얻을 수 있습니다.
요소의 너비와 높이가 스타일 속성이나 스타일 시트에 설정되지 않은 경우에도 getCompulatedStyle 또는 currentStyle을 사용하여 얻을 수 있나요? 대답은 getCompulatedStyle은 가능하지만 currentStyle은 불가능하다는 것입니다. 다음과 같습니다
코드는 다음과 같습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.