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

高洛峰

发布时间：2016-11-28 16:20:56

1279人浏览过

来源于php中文网

原创

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

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

JavaScript CSS Style属性对照表

盒子标签和属性对照

立即学习“Java免费学习笔记（深入）”；

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

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

样式标签和属性对照

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

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Cakephp中使用JavaScriptHelper来引入js文件下一篇：谈php+mysql注射语句构造

作者最新文章

实现一个 Java 版的 Redis

2018-05-30 13:56

Asp.net使用SignalR实现发送图片

2018-05-28 16:22

HTML5:使用Canvas实时处理Video

2018-05-28 17:58

最简单的微信小程序Demo