為了達到某種特殊的效果我們需要用Javascript動態去更改某一個標籤的Css屬性。比如:滑鼠經過一個圖片時我們讓圖片加一個邊框,代碼可能是這樣:
JavaScript代碼
- <script type="text/javascript">
- function imageOver(e) {
- e.style.border="1px solid red";
- }
- function imageOut(e) {
- e.style.borderWidth=0;
- }
- </script>
- <img src="phplamp.gif" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript中style後面的屬性應該是什嗎?
JavaScript CSS Style屬性對照表
| 盒子標籤和屬性對照 |
| 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 |