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

 

  CSS与JS紧密配合,为我们的页面增添了很多别致的效果。在52CSS.com中也有相关的案例。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如:鼠标经过一个...

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

xhtml xml Example Source Code"/> Example Source Code [www.mjjzz.com]
<script type="text/javascript">    
    function imageOver(e) {    
        e.style.border="1px solid red";    
    }    
    function imageOut(e) {    
        e.style.borderWidth=0;    
    }    
</script>
    
xhtml xml Example Source Code"/> Example Source Code [www.mjjzz.com]
<img src="mjjzz.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />  
 
JavaScript CSS Style属性对照表

盒子标签和属性对照

 Example Source Code [www.mjjzz.com]
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 [www.mjjzz.com]
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
background   background 
background-attachment   backgroundAttachment 
background-color   backgroundColor 
background-image   backgroundImage 
background-position   backgroundPosition 
background-repeat   backgroundRepeat 
color   color 

样式标签和属性对照 

 Example Source Code [www.mjjzz.com]
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 [www.mjjzz.com]
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
font   font 
font-family   fontFamily 
font-size   fontSize 
font-style   fontStyle 
font-variant   fontVariant 
font-weight   fontWeight 

文本标签和属性对照 

 Example Source Code [www.mjjzz.com]
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
下一篇CSS clear的属性及使用方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭