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. | 
发表于 2010-9-1 00:52:51
