In various cases JS gets the element width high

In all cases JS gets the element width high

For the sake of the narrative simplicity, here only the width example is taken.

　　Scenario one, the element style property is set to Width/height

<div style= "width:996px" >test<div>
<script>
var div = document.getelementsbytagname (' div ') [0];
alert (div.style.width);
</script> Default Classification

As above, you can use El.style.width.

　　

If width is not set in the Style property, then using El.style.width will not get to the following

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

All browsers pop out an empty string. Even if the style is embedded in the CSS of the page, it is still not available, as follows

<style>
div {width:100px}
</style>

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

This time getComputedStyle or Currentstyle will come in handy.

　　Scenario two, elements are set by introducing style sheets Width/height

There are two ways to introduce a style sheet, one is to use the link tag to introduce a separate CSS file, and the other is to use the style tag directly in the HTML page. This is the second way of testing. As follows

<style>
div {width:100px}
</style>
<div>test<div>
<script>
function GetStyle (el, name) {
if (window.getComputedStyle) {
Return window.getComputedStyle (EL, null);
}else{
return el.currentstyle;
}
}
var div = document.getelementsbytagname (' div ') [0];
Alert (GetStyle (Div, ' width '));
</script>

100px is ejected from all browsers. Description through getComputedStyle and currentstyle you can get to the width of the element defined in the style sheet.

What if the element does not have a wide height set in the Style property, does not set the width height in the stylesheet, can also be obtained with getComputedStyle or Currentstyle? The answer is getComputedStyle,Currentstyle can not . As follows

<div>test<div>
<script>
function GetStyle (el, name) {
if (window.getComputedStyle) {
Return window.getComputedStyle (EL, null);
}else{
return el.currentstyle;
}
}
var div = document.getelementsbytagname (' div ') [0];
Alert (GetStyle (Div, ' width '));
</script>

The div neither sets the style property nor introduces a style sheet. You can get the width height in firefox/ie9/safari/chrome/opera (browser default), but not in Ie6/7/8, the return is auto.

Note that the GetStyle method takes precedence over getComputedStyle, and IE9 already supports the method. So the IE9 can get to the wide height. However, IE6/7/8 is not supported and can only be obtained using Currentstyle.

In various cases JS gets the element width high