How to obtain the final CSS value of an element

This problem is encountered in the component CSS loading solution.

Scenario:

The element style can be written in the style or in the external link CSS. If it is not set, it will also read the default CSS of the browser, now we need to calculate the final CSS style used by an element of getcomputedstyle.

Differences:

1) style is written in the line style. If there is a value in the style, it will be read. If not, it will be empty and readable and writable.

2) getcomputedstyle is the final CSS value used to read the element, read-only

 

Solution:

In IE and non-ie, the solution is different.

In ie:

Through element.Currentstyle can get the style of the current element

Non-ie:

PassDocument. defaultview. getcomputedstyle (element, null) In fact, this method also exists in the window, which can be called directly through window. getcomputestyle.

All CSS styles used on the element are obtained above. But what if I want to get a style? In a non-ie environment, you can add the getprototyvalue ('attr ') method (ie9 currently supports this method ),

The method smaller than ie9 can be obtained in two ways at present. The first method is ["ATTR"], and the second method is to add getattribute ("ATTR") to the end "), however, this method requires the name of the camper.

In summary, the final CSS style used to obtain the element can be written in this way.

 <!  Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"  >  <  Html  >   <  Head  >    <  Title  > New Document</  Title  >    <  Meta  Name  = "Generator"  Content  = "Editplus"  >    <  Meta  Name  = "Author"  Content  = ""  >   <  Meta  Name  = "Keywords"  Content  = ""  >    <  Meta  Name  = "Description"  Content  = ""  >   </  Head  >  <  Body  >    <  Div  ID  = "Test"  Style  = "Float: Left; color: red; backgound-color: # DDD; Height: 300px; width: 200px ;"  > Test </  Div  >    <  Script  >     Function  Getcurrentstyle (Ele, ATTR) {ATTR  =  (  ! -  [  1  ,]  &&  ATTR  = "  Float  "  )  ?   "  Stylefloat  "  :  "  Float  " ;  If  (Document. defaultview ){  VaR  Style  =  Document. defaultview. getcomputedstyle (Ele,  Null  );  Return  Style ?  Style. getpropertyvalue (ATTR ):  Null  ;}  Else  {  Return  Ele. currentstyle [ATTR] ;}}  VaR  Test  = Document. getelementbyid (  '  Test  '  );  VaR  Style  =  Getcurrentstyle (test,  "  Float "  ); Alert (style );  </  Script  >   </  Body  >  </  Html  > 

Note that for the float attribute on the internetStylefloatIn a non-ie environmentCssfloat, I used cssfloat in chrome17 and firefox12, but none of them were successfully tested. So I simply wrote "float", OK!

we welcome your comments.