Home >Web Front-end >JS Tutorial >Obtain implementation code for element width and height in various scenarios_javascript skills
Obtain implementation code for element width and height in various scenarios_javascript skills
- WBOYOriginal
- 2016-05-16 18:02:221237browse
Scenario 1, the element style attribute is set to width/height
Copy code The code is as follows:
< ;div style="width:100px;">test
<script> <br>var div = document.getElementsByTagName('div')[0]; <br>alert(div.style. width); <br></script>
As above, use el.style.width. If width is not set in the style attribute, it will not be obtained using el.style.width, as follows
Copy code The code is as follows :
test
<script> <br>var div = document.getElementsByTagName('div')[0]; <br>alert(div. style.width); <br></script>
The empty string pops up in all browsers. Even if the style is embedded in the css of the page, it still cannot be obtained, as follows
<script> <br>var div = document.getElementsByTagName('div')[0]; <br>alert(div. style.width); <br></script>
The empty string pops up in all browsers. Even if the style is embedded in the css of the page, it still cannot be obtained, as follows
Copy the code The code is as follows:
test
<script> <br>var div = document .getElementsByTagName('div')[0]; <br>alert(div.style.width); <br></script>
At this time getComputedStyle or currentStyle will come in handy.
Scenario 2, the element sets width/height by introducing a style sheet
There are two ways to introduce a style sheet, one is to use the link tag to introduce a separate css file, the other is to use the style tag directly in the html page. The second method of testing is used here. As follows
<script> <br>var div = document .getElementsByTagName('div')[0]; <br>alert(div.style.width); <br></script>
At this time getComputedStyle or currentStyle will come in handy.
Scenario 2, the element sets width/height by introducing a style sheet
There are two ways to introduce a style sheet, one is to use the link tag to introduce a separate css file, the other is to use the style tag directly in the html page. The second method of testing is used here. As follows
Copy the code The code is as follows:
test
<script> <br>function getStyle(el, name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null); <br>}else{ <br>return el.currentStyle; <br>} <br>} <br>var div = document.getElementsByTagName('div')[0 ]; <br>alert(getStyle(div, 'width')); <br></script>
100px pops up in all browsers. Note that the width and height of the element defined in the style sheet can be obtained through getComputedStyle and currentStyle.
If the width and height of the element are not set in the style attribute or in the style sheet, can it still be obtained using getComputedStyle or currentStyle? The answer is that getComputedStyle can, but currentStyle cannot. As follows
<script> <br>function getStyle(el, name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null); <br>}else{ <br>return el.currentStyle; <br>} <br>} <br>var div = document.getElementsByTagName('div')[0 ]; <br>alert(getStyle(div, 'width')); <br></script>
100px pops up in all browsers. Note that the width and height of the element defined in the style sheet can be obtained through getComputedStyle and currentStyle.
If the width and height of the element are not set in the style attribute or in the style sheet, can it still be obtained using getComputedStyle or currentStyle? The answer is that getComputedStyle can, but currentStyle cannot. As follows
Copy the code The code is as follows:
test
<script> <br>function getStyle(el, name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null); <br>}else{ <br>return el. currentStyle; <br>} <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getStyle(div, 'width')); <br></script> ; <br> </div> <br>div neither sets the style attribute nor introduces a style sheet. The width and height (browser default) can be obtained in Firefox/IE9/Safari/Chrome/Opera, but not in IE6/7/8, and auto is returned. <br>Note that the getStyle method here uses getComputedStyle first, and IE9 already supports this method. Therefore, the width and height can be obtained in IE9. However, IE6/7/8 does not support it and can only be obtained using currentStyle. <br>Scenario 3: The element neither sets the style attribute nor introduces a style sheet <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="84427" class="copybut" id="copybut84427" onclick="doCopy('code84427')"><u>Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code84427"> <br><div>test<div> <br><script> <br>function getStyle(el,name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null)[name]; <br>}else{ <br>return el.currentStyle[name]; <br>} <br>} <br>function getWH(el, name) { <br>var val = name === "width" ? el.offsetWidth : el.offsetHeight, <br>which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; <br>// display is none <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>return val 'px'; <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getWH(div, 'width')); <br></script>
思路很简单：获取元素的offsetWidth/offsetHeight，减去元素的padding和border。
<script> <br>function getStyle(el, name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null); <br>}else{ <br>return el. currentStyle; <br>} <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getStyle(div, 'width')); <br></script> ; <br> </div> <br>div neither sets the style attribute nor introduces a style sheet. The width and height (browser default) can be obtained in Firefox/IE9/Safari/Chrome/Opera, but not in IE6/7/8, and auto is returned. <br>Note that the getStyle method here uses getComputedStyle first, and IE9 already supports this method. Therefore, the width and height can be obtained in IE9. However, IE6/7/8 does not support it and can only be obtained using currentStyle. <br>Scenario 3: The element neither sets the style attribute nor introduces a style sheet <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="84427" class="copybut" id="copybut84427" onclick="doCopy('code84427')"><u>Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code84427"> <br><div>test<div> <br><script> <br>function getStyle(el,name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null)[name]; <br>}else{ <br>return el.currentStyle[name]; <br>} <br>} <br>function getWH(el, name) { <br>var val = name === "width" ? el.offsetWidth : el.offsetHeight, <br>which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; <br>// display is none <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>return val 'px'; <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getWH(div, 'width')); <br></script>
思路很简单：获取元素的offsetWidth/offsetHeight，减去元素的padding和border。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：TextArea does not support maxlength solution (jquery)_jqueryNext article：TextArea does not support maxlength solution (jquery)_jquery
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills