Yesterday, I tried to make the home page in my blog looks better, and decided to make all the DIVs' height adaptable. In another words, the top DIV's height is based on the content's height. I used to think "It's so easy! Ummm". However, I'm wrong, now I know there are also amounts of skills and knowledge about js that I dont really control, even some superficial parts. "getComputedStyle" and "currentStyle" are two of them, yesterday, I have been so stupid trid to used "element.style.height" and "element.height" to get the content's height in DIVs for about half an hour, and the result was obviously nothing. What's wrong?
If we write a div element, like this :
iframe {
height:100px;
}
<iframe height="200px" style="height:300px;"></iframe>
At first, we should make sure the priority. As our coders know, the External style sheet < Internal style sheet < Inline style. But if the External style sheet is put after Internal style sheet, there is another thing. OK, so what's the height of "iframe" ? Bingo! 300px, Easy humm. It only uses the style in the iframe label. Without that, it will use the Internal style sheet, and the number of height will become 100px. And finally, if we remove the Internal style sheet, the height will become 200px. This is called Priority Level in Multiple Styles.
So in this way, we should know, JS also has a series of rules to meet the CSS Priority Level in Multiple Styles. Just like the follows:
(1) iframeid.height /* 200px */
(2) iframeid.style.height /* 300px */
(3) document.styleSheets[0].cssRules[0].style.height; /* 100px */
document.styleSheets[0].rules[0].style.height; /* 100px for IE */
(4) document.defaultView.getComputedStyle(iframeid, null).height; /* 300px */
iframeid.currentStyle.height; /* 300px for IE */
Yep, the code in (1)(2)(3) is so obvious that I should not explain more deeply. If u dont know, just google or baidu, sry for that. And let's go ahead, the code in (4) is get the final style value computed by computer, and we dont have to care about the effect of CSS Priority Level in Multiple Styles. And (4) is read only, but (1)(2)(3) can be used to set the style of an element.
And of course, if we want to get the value of some special attribute, we can use more methods, like follows:
(1) document.defaultView.getComputedStyle(iframeid, null).height;
(2) document.defaultView.getComputedStyle(iframeid, null).getPropertyValue("height");
(3) iframeid.style.getAttribute("height"); /* for IE */
The style name in (1) should be written as Hump Form, like "backgroundColor", and especially, the "float" should be written as "cssFloat" and "styleFloat"(for IE). But the style name in (2) can be written as traditional CSS Form by using "-", like "background-color" and so on. The code in (3) is prepared for IE, if you want to use your code in IE6 and IE7, you should also write the style name as Hump Form, however, if you only want to aim to IE9+, you can use traditional CSS Form, that's OK.