Introduction to the difference between style, currentStyle, getComputedStyle
There are three ways to style sheets
Inline Style: It is written in the tag. Inline Style is only valid for all tags.
Internal Style Sheet: It is written in HTML, and the internal style is only valid for the web page.
External Style Sheet: If many web pages need to use the same styles, write the styles in a CSS file with .css as the suffix, and then reference the CSS file in each web page that needs to use these styles. The most commonly used style attribute is. In JavaScript, the value of XXX can be obtained through document.getElementById(id).style.XXXX. However, unexpectedly, this can only obtain the style value set through embedded methods, that is, the value set in the style attribute.
Solution: Introduce the currentStyle, runtimeStyle, getComputedStyle style standard style, which may be specified by the style attribute!
runtimeStyle runtime style! If it overlaps with the property of the style, the property of the style will be overwritten!
currentStyle refers to the combination of style and runtimeStyle! You can get the value of the CSS style referenced through inline or externally through currentStyle (IE only). For example: document.getElementById("test").currentStyle.top
To be compatible with FF, you have to need getComputedStyle to do it
Note: getComputedStyle is in firefox, currentStyle is in ie. For example
<style>#mydiv {width : 300px;}</style>but:
var mydiv = document.getElementById('mydiv');if(mydiv.currentStyle) {var width = mydiv.currentStyle['width'];alert('ie:' + width);} else if(window.getComputedStyle) {var width = window.getComputedStyle(mydiv , null)['width'];alert('firefox:' + width);}In addition, under FF, you can also obtain it in the following way
document.defaultView.getComputedStyle(mydiv,null).width;window.getComputedStyle(mydiv,null).width;
Here are some additions:
While reading the blog, I saw these 3 guys - style, currentStyle, getComputedStyle. I haven't encountered it when I was studying before, but now I have encountered it, so I've studied it for a little bit. I discovered some problems, maybe it was because of the age of time, or it might be because of my ignorance, but it really confused me. Although Tao Yuanming said that he did not seek much understanding when studying, as a front-end developer who wants to become an excellent front-end, he still needs to understand it, otherwise he will not be able to sleep!
Let's lay the groundwork first. Let’s talk about the three forms of cascading style sheets (the three types have different names, according to their respective habits):
one. Inline style: set with the style attribute in HTML tags. like:
1 <p style="color:#f90;">This is the inline style</p>
two. Embed style: Set through the <head> tag through the <style> tag. like:
<style type="text/css"> /*This is the embed style*/ .stuff{color:#f90}</style>three. External style: Set via <link> tag. like:
<link rel="stylesheet" href="path/style.css" type="text/css"> ==================================================/*External Style*/ @charset "UTF-8"; .stuff{color:#f90;}The third method is recommended.
The three protagonists below are on the field.
The first person who walked slowly towards us was style. It is used in obj.style.attr; a film critic commented on his blog:
style can only get the inline style of the element, and the inner and outer styles cannot be obtained using style.
I verified it with the following code, and it is indeed as mentioned above. I used three styles and the result I got is the value of the inline style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unt titled document</title> <link href="style.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #stuff{width:300px;} </style><script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('stuff'); console.log(oDiv.style.width); //alert(oDiv.style.width); }; </script></head><body> <div id="stuff"></div></body></html>External link stylesheet style.css:
1 @charset "utf-8"; 2 /* CSS Document */ 3 #stuff{width:100px;}
The result is 400px.
Following style is currentStyle, which is said to have a strong backing MS, which means that this guy can only be used in IE browser. Others are not good. It is used by window.currentStyle["attr'] or window.currentStyle.attr. In IE, get the width attribute value of 300px in embedded style sheet, which cannot be passed in Mozilla Firefox.
The last one comes to getComputedStyle, which uses window.getComputedStyle(ob, pseudoElt)["attr'] or window.getComputedStyle(ob, pseudoElt).attr. Among them, pseudoElt represents a pseudoclass such as: after,:before. If you do not use a pseudoclass, set to null.
The film critic commented:
getComputedStyle functions the same as currentStyle, but it is suitable for FF, opera, safari, and chrome.
With a skeptical attitude, I verified it again, and IE7, IE8, and IE9 all reported errors:
The object does not support the "getComputedStyle" attribute or method
Browser compatibility issues. The browser compatibility issue is indeed a headache for front-end developers, especially the culprit IE6. But we cannot be afraid and stay away from it, but instead deal with the moves, and soldiers come to block the water and soil. You will have a lot of fun in the fight with it and a sense of accomplishment after defeating it! ! !
Another point: getComputedStyle and currentStyle can only get attribute values, but cannot set attributes. If you want to set the attribute value, use ob.style.attr.
Please give me some advice if there is something wrong, thank you in advance! !