Summary of precautions for using CSS in Javascript

ArticleDirectory

• Internet Explorer
• Older Netscape's (4.7 and earlier)
• Netscape 6.0 + and Opera (and other Mozilla)

1. When changing the style of a single element, note that the syntax of the style object is almost exactly the same as that used in CSS. However, the attribute containing the hyphen is replaced with a "Camel castring" format. For example, font-size is now fontsize, while margin-top is changed to margintop;
Float (ie uses style. stylefloat );
3. Obtain the calculation style of the element:
Under W3C Dom, you can: CopyCode The Code is as follows: var heading = Document. getelementbyid ("heading ");
VaR computedstyle = Document. defaultview. getcomputedstyle (heading, null );
VaR computedfontfamily = computedstyle. fontfamily; // sans-serif

IE does not support the DOM standard method. You can:Copy codeThe Code is as follows: var heading = Document. getelementbyid ("heading ");
VaR computedfontfamily = heading. currentstyle. fontfamily; // sans-serif

Based on these methods, you can create a cross-browser function to implementCopy codeThe Code is as follows: function retrievecomputedstyle (element, styleproperty ){
VaR computedstyle = NULL;
If (typeof element. currentstyle! = "Undefined "){
Computedstyle = element. currentstyle;
} Else {
Computedstyle = Document. defaultview. getcomputedstyle (element, null );
}
Return computedstyle [styleproperty];
}

Table
CSS properties to JavaScript reference Conversion

CSS Property	Javascript reference
Background	Background
Background-Attachment	Backgroundattachment
Background-color	Backgroundcolor
Background-Image	Backgroundimage
Background-Position	Backgroundposition
Background-repeat	Backgroundrepeat
Border	Border
Border-bottom	Borderbottom
Border-bottom-color	Borderbottomcolor
Border-bottom-style	Borderbottomstyle
Border-bottom-Width	Borderbottomwidth
Border-color	Bordercolor
Border-left	Borderleft
Border-left-color	Borderleftcolor
Border-left-style	Borderleftstyle
Border-left-Width	Borderleftwidth
Border-Right	Borderright
Border-right-color	Borderrightcolor
Border-right-style	Borderrightstyle
Border-right-Width	Borderrightwidth
Border-style	Borderstyle
Border-top	Bordertop
Border-top-color	Bordertopcolor
Border-top-style	Bordertopstyle
Border-top-Width	Bordertopwidth
Border-Width	Borderwidth
Clear	Clear
Clip	Clip
Color	Color
Cursor	Cursor
Display	Display
Filter	Filter
Font	Font
Font-family	Fontfamily
Font-size	Fontsize
Font-variant	Fontvariant
Font-weight	Fontweight
Height	Height
Left	Left
Letter-spacing	Letterspacing
Line-height	Lineheight
List-style	Liststyle
List-style-Image	Liststyleimage
List-style-Position	Liststyleposition
List-style-type	Liststyletype
Margin	Margin
Margin-bottom	Marginbottom
Margin-left	Marginleft
Margin-Right	Marginright
Margin-top	Margintop
Overflow	Overflow
Padding	Padding
Padding-bottom	Paddingbottom
Padding-left	Paddingleft
Padding-Right	Paddingright
Padding-top	Paddingtop
Page-break-after	Pagebreakafter
Page-break-before	Pagebreakbefore
Position	Position
Float	Stylefloat
Text-align	Textalign
Text-Decoration	Textdecoration
Text-Decoration: Blink	Textdecorationblink
Text-Decoration: Line-through	Textdecorationlinethrough
Text-Decoration: None	Textdecorationnone
Text-Decoration: overline	Textdecorationoverline
Text-Decoration: underline	Textdecorationunderline
Text-indent	Textindent
Text-Transform	Texttransform
Top	Top
Vertical-align	Verticalalign
Visibility	Visibility
Width	Width
Z-Index	Zindex

Usageinternet Explorer

Document. All.Div_id. Style.Js_property_reference="New_css_property_value";

Older Netscape's (4.7 and earlier)

Document.Div_id.Js_property_reference="New_css_property_value";

Netscape 6.0 + and Opera (and other Mozilla)

Document. getelementbyid (Div_id). Style.Js_property_reference="New_css_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getelementbyid ()" reference.