注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

JS编码与CSS属性对照表  

2010-03-11 23:52:08|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

JS编码与CSS属性对照表

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)" /> 
 
 
盒子标签和属性对照
    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
 

来源:学网
 
>
  评论这张
 
阅读(1344)| 评论(10)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018