CSS與JS緊密配合,為我們的頁面增添了很多別致的效果。為了達到某種特殊的效果我們需要用Javascript動態的去更改某一個標簽的CSS屬性。
例如常用的關閉某個漂浮的廣告顯示:document.getElementById('ad').style.display='none';相當於:.ad{ display:none}.
下面就是JS 控制CSS樣式表的語法對照:
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
background
background
background-attachment
backgroundAttachment
background-color
backgroundColor
background-image
backgroundImage
background-position
backgroundPosition
background-repeat
backgroundRepeat
color
color
display
display
list-style-type
listStyleType
list-style-image
listStyleImage
list-style-position
listStylePosition
list-style
listStyle
white-space
whiteSpace
font
font
font-family
fontFamily
font-size
fontSize
font-style
fontStyle
font-variant
fontVariant
font-weight
fontWeight
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