CSS属性与JavaScript编码对照表

 CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用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="css.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


posted on 2009-08-27 08:42  asum  阅读(257)  评论(0编辑  收藏  举报

导航