微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

烈火建站网: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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐