CSS属性与JavaScript编码对照表

  •   2009-07-31/13:29
  •     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


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多