CSS语法 (不区分大小写) |
JavaScript语法 (区分大小写) |
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 |
float |
floatStyle |
margin |
margin |
margin-bottom |
marginBottom |
margin-left |
marginLeft |
margin-right |
marginRight |
margin-top |
marginTop |
padding |
padding |
padding-bottom |
paddingBottom |
padding-left |
paddingLeft |
padding-right |
paddingRight |
padding-top |
paddingTop |
|
颜色和背景标签和属性对照 |
CSS语法 (不区分大小写) |
JavaScript语法 (区分大小写) |
background |
background |
background-attachment |
backgroundAttachment |
background-color |
backgroundColor |
background-image |
backgroundImage |
background-position |
backgroundPosition |
background-repeat |
backgroundRepeat |
color |
color |
|
样式标签和属性对照 |
CSS语法 (不区分大小写) |
JavaScript语法 (区分大小写) |
display |
display |
list-style-type |
listStyleType |
list-style-image |
listStyleImage |
list-style-position |
listStylePosition |
list-style |
listStyle |
white-space |
whiteSpace |
|
文字样式标签和属性对照 |
CSS语法 (不区分大小写) |
JavaScript语法 (区分大小写) |
font |
font |
font-family |
fontFamily |
font-size |
fontSize |
font-style |
fontStyle |
font-variant |
fontVariant |
font-weight |
fontWeight |
|
文本标签和属性对照 |
CSS语法 (不区分大小写) |
JavaScript语法 (区分大小写) |
letter-spacing |
letterSpacing |
line-break |
lineBreak |
line-height |
lineHeight |
text-align |
textAlign |
text-decoration |
textDecoration |
text-indent |
textIndent |
text-justify |
textJustify |
text-transform |
textTransform |
vertical-align |
verticalAlign |
补充:
在建设网站的过程中,有时难免会要用js来控制css,其实这是十分简单的看下面的例子。
html:<div id="my_div" style="background-color:red">js控制css</div>
js:document.getElementById("my_div").style.backgroundColor="red"
其实就是用style对象访问css属性,值得注意的是样式属性的写法在css里是background-color,但是在js里就是backgroundColor,一般情况是把"_"去掉,第二个字母用大写。
如果用的是外联样式表,就用currentStyle对象代替style对象。如:
document.getElementById("my_div").currentStyle.backgroundColor="red"
一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试了</title>
<script type="text/javascript">
function divFloatRight(e) {
e.style.backgroundColor = "#ff0000";
e.style.styleFloat = "right";//IE
e.style.cssFloat = "right";//firefox and others explorer
}
function divFloatLeft(e) {
e.style.backgroundColor = "transparent";
e.style.styleFloat = "left";
e.style.cssFloat = "left";
}
</script>
</head>
<body>
<div>
<div id="demo" style="border: dashed 1px #000000;" onmousemove="divFloatRight(this);"
onclick="divFloatLeft(this);">
JavaScript控制div的float属性,onmousemove~float:right,onclick~float:left。
</div>
</div>
</body>
</html>