CSS与JavaScript编码方法Style属性对照表

2611月

CSS与JavaScript编码方法Style属性对照表

CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？

Example Source Code
<script type=”text/javascript”>
    function imageOver(e) {
        e.style.border=”1px solid red”;
    }
    function imageOut(e) {
        e.style.borderWidth=0;
    }
</script>
Example Source Code
<img src=”onlygrape.png” onmouseover=”imageOver(this)” onmouseout=”imageOut(this)” />

JavaScript CSS Style属性对照表

盒子标签和属性对照

Example Source Code
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

颜色和背景标签和属性对照

Example Source Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
background 　　            background
background-attachment 　　backgroundAttachment
background-color　　       backgroundColor
background-image 　      　backgroundImage
background-position　   　 backgroundPosition
background-repeat 　     　backgroundRepeat
color 　                 　color

样式标签和属性对照

Example Source Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
display 　　               display
list-style-type　       　 listStyleType
list-style-image 　      　listStyleImage
list-style-position　   　 listStylePosition
list-style　　             listStyle
white-space　　            whiteSpace

文字样式标签和属性对照

Example Source Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
font　　                   font
font-family　           　 fontFamily
font-size　             　 fontSize
font-style　            　 fontStyle
font-variant          　　 fontVariant
font-weight 　           　fontWeight

文本标签和属性对照

Example Source Code
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