Style this thing I think everyone is familiar with, do not look at the entire page style will lose luster, so the importance of style (style) is self-evident.
So an element of style in the end how many support it? One might argue that these things have to W3C said the operator.
In fact, this thing is not too W3C said, why? Because even if there W3C above, but the browser If not, then everything would be meaningless, because the browser does not support, W3C said this style better then stick to no avail.
Well, since the only criterion for the detection element style of the browser, then the problem came. For a simple div element browsers support it in the end how many styles of it?
Of course, here we are saying to a more commonly used method to obtain elements of style: getComputedStyle
Let's briefly talk about getComputedStyle usage, see the name to know about it with style, according to the English translation of the word is:
get get
Computed computing
Style Style
In other words, this method can help we get a style element in the actual final value to be calculated.
The easiest method is used, first of all there are two parameters, elements and pseudo-classes. The second parameter is not required, when not queries pseudo-class elements can be ignored or passed null.
Example of use:
the getComputedStyle (acquired element, pseudo-class name) [Style Name]
E.g:
<style>
*{margin:0;padding:0}
#myDiv{width:200px;height:300px;background:red;}
#myDiv:after{
width:50px;height:30px;content: '';background: yellow;
}
</style>
<body>
<div id='myDiv'>Leo</div>
<body><script>
console.log(getComputedStyle(myDiv,null)['width'])//'200px'
console.log(getComputedStyle(myDiv,':after')['width'])//'50px'
console.log(myDiv.style.width)//''
</script>We can see that he could easily get the style and the style element value of the element pseudo-classes, and the difference between it and the element.style.
element.style element read only "inline style", i.e., written in the style attribute element styles; the final read style getComputedStyle styles, including the "inline style", "embedded pattern" and " external style. "
However, element.style supports both read or write support, but supports only read getComputedStyle does not support writing.
Of course, some students will ask to see this, the teacher, and elements of it that browser support it in the end how many kinds of styles and what does it matter?
The answer is: yes, but also quite.
Observant students may have seen, and its use is to use a back brace and then put in a style returns a numerical pattern of the last element. You have not found a data type of JavaScript in it and use it like?
Yes, that is JSON.
You will also find JSON support brackets and then placed back into the string, if the property will return value of the property. The so-called key-value pair ( "key = value"). So if you do not add in parenthesis that is itself directly behind getComputedStyle will return the object out, and this large object includes all styles, but usually when we use only the key followed by the value to take it.
To let Chrome browser, for example, of course, the graduates can try:
console.log(getComputedStyle(myDiv));//
You will find a long, long, and did not show a huge object finished, we can also point to open this object, which contains all the css styles this element can be used, of course, you can see a front 280 ( 0-279) based on figures as a named key, these are not, css style element is digital only after that we can use.
Well, since we've already had this large object, and then we just need to write a simple loop around like key is digital you can know how many css styles in the end supported browser.
index. 1 = var;
for (var I in the getComputedStyle (myDiv)) {
IF (isNaN (Number The (I))) {
index ++;
the console.log (I) // find all styles
}};
console.log(index);//414
Yes, the Google browser to support div style elements a total of 414 kinds, dear students, you guessed it?
Finally, talk about compatibility issues on getComputedStyle in Chrome and Firefox support this attribute, while IE 9,10,11 also support the same features, IE 8 does not support this feature. IE 8 is element.currentStyle support this property, this property returns the return value getComputedStyle and consistent, but float on the support, the support is styleFloat IE 8, which needs attention.
Welcome to click into Leo Lee tour of the front end of the classroom teacher
click to enter the site the most complete full-stack course "Lee Tour Leo - Web front-end, full-stack from zero base to engineer" takes you step in with the fastest time salary of thousands