為了達到某種特殊的效果我們需要用Javascript動態的去更改某一個標簽的Css屬性比如鼠標經過一個圖片時我們讓圖片加一個邊框代碼可能是這樣
JavaScript代碼
<script type=text/javascript>
function imageOver(e) {
estyleborder=px solid red;
}
function imageOut(e) {
estyleborderWidth=;
}
</script>
<img src=phplampgif onmouseover=imageOver(this) onmouseout=imageOut(this) />
JavaScript中style後面的屬性應該是什麼?
JavaScript CSS Style屬性對照表
盒子標簽和屬性對照 |
CSS語法 (不區分大小寫) |
JavaScript語法 (區分大小寫) |
border
border
borderbottom
borderBottom
borderbottomcolor
borderBottomColor
borderbottomstyle
borderBottomStyle
borderbottomwidth
borderBottomWidth
bordercolor
borderColor
borderleft
borderLeft
borderleftcolor
borderLeftColor
borderleftstyle
borderLeftStyle
borderleftwidth
borderLeftWidth
borderright
borderRight
borderrightcolor
borderRightColor
borderrightstyle
borderRightStyle
borderrightwidth
borderRightWidth
borderstyle
borderStyle
bordertop
borderTop
bordertopcolor
borderTopColor
bordertopstyle
borderTopStyle
bordertopwidth
borderTopWidth
borderwidth
borderWidth
clear
clear
float
floatStyle
margin
margin
marginbottom
marginBottom
marginleft
marginLeft
marginright
marginRight
margintop
marginTop
padding
padding
paddingbottom
paddingBottom
paddingleft
paddingLeft
paddingright
paddingRight
paddingtop
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
From:http://tw.wingwit.com/Article/program/net/201311/13190.html