| CSS語(yǔ)法 (不區分大小寫(xiě)) | JavaScript語(yǔ)法 (區分大小寫(xiě)) |
| 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語(yǔ)法 (不區分大小寫(xiě)) | JavaScript語(yǔ)法 (區分大小寫(xiě)) |
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| color | color |
|
| 樣式標簽和屬性對照 |
| CSS語(yǔ)法 (不區分大小寫(xiě)) | JavaScript語(yǔ)法 (區分大小寫(xiě)) |
| display | display |
| list-style-type | listStyleType |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style | listStyle |
| white-space | whiteSpace |
|
| 文字樣式標簽和屬性對照 |
| CSS語(yǔ)法 (不區分大小寫(xiě)) | JavaScript語(yǔ)法 (區分大小寫(xiě)) |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-style | fontStyle |
| font-variant | fontVariant |
| font-weight | fontWeight |
|
| 文本標簽和屬性對照 |
| CSS語(yǔ)法 (不區分大小寫(xiě)) | JavaScript語(yǔ)法 (區分大小寫(xiě)) |
| 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 |
補充:
在建設網(wǎng)站的過(guò)程中，有時(shí)難免會(huì )要用js來(lái)控制css,其實(shí)這是十分簡(jiǎn)單的看下面的例子。
html:<div id="my_div" style="background-color:red">js控制css</div>
js:document.getElementById("my_div").style.backgroundColor="red"
其實(shí)就是用style對象訪(fǎng)問(wèn)css屬性，值得注意的是樣式屬性的寫(xiě)法在css里是background-color,但是在js里就是backgroundColor,一般情況是把"_"去掉，第二個(gè)字母用大寫(xiě)。
如果用的是外聯(lián)樣式表，就用currentStyle對象代替style對象。如：
document.getElementById("my_div").currentStyle.backgroundColor="red"
一個(gè)例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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>
