javascript中使用css需要注意的地方小结

1.在改变单个元素样式时，注意style对象的语法和css中使用的语法几乎是一一对应的。不过包含连字符的属性则被替换为一种“camel castring”的形式，例如：font-size现在成了fontSize，而margin-top变成了marginTop；
2.在使用“float”时，因为“float”是javascript的一个保留字，所以就不能使用style.float，而改成了style.cssFloat(IE使用的是style.styleFloat)；
3. 获得元素的计算样式:
在W3C DOM下可以：
代码如下:

var heading = document.getElementById("heading"); 
var computedStyle = document.defaultView.getComputedStyle(heading,null); 
var computedFontFamily = computedStyle.fontFamily;//sans-serif 
 
IE不支持使用DOM标准方法，可以： 
 代码如下:

var heading = document.getElementById("heading"); 
var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif 
 
综合上述这些方法，可以创建一个跨浏览器函数来实现 
 代码如下:

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]; 
} 

对照表 

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
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";
Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.