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

资讯 驱动中国 991 次阅读
分享 Q

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

<script type="text/javascript">   
     function imageOver(e) {   
         e.style.border="1px solid red";   
     }   
     function imageOut(e) {   
         e.style.borderWidth=0;   
     }   
</script>

<img src="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />

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

版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com
本文价值 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友