What you need to note about using CSS in JavaScript summary _javascript tips

1. When changing a single element style, note that the syntax of the style object is almost one by one corresponding to the syntax used in CSS. However, attributes that contain hyphens are replaced with the form of a "camel castring", for example: Font-size is now fontsize, and Margin-top has become margintop;
2. When using "float", because "float" is a reserved word of javascript, so can not use style.float, and changed to style.cssfloat (ie use is style.stylefloat);
3. Get the calculation style of the element:
Under the Consortium DOM, you can:

Copy Code code 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 use of DOM standard methods to:

Copy Code code as follows:

var heading = document.getElementById ("heading");
var computedfontfamily = Heading.currentstyle.fontfamily;//sans-serif

By combining these methods, you can create a Cross-browser function to implement the

Copy Code code 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

Property

CSS	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

Usage

Internet 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";

The use of parentheses instead of square brackets in newer Mozilla ' getElementById () "Reference.