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

转自http://www.52css.com/article.asp?id=910

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=”52css.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

加载评论框需要翻墙