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

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

 

 

 

 

 

 

 

 

总结如下：

             1、对于没有中划线的css属性一般直接使用style.属性名即可。如：obj.style.margin，                  obj.style.width，obj.style.left，obj.style.position等。
             2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。
 

           这个规律我想大多数的前端开发者也都熟知。对在css中有一个特殊的属性其js使用方法确比较特殊。

            因为float是Javascript的保留字，那怎么在js中书写样式表中的float呢？
            我们不能直接使用obj.style.float来使用，这样操作是无效的。
           其正确的使用方法是为：IE:obj.style.styleFloat，其他浏览器Mozilla(gecko)，ff等用styleFloat:obj.style.cssFloat。

            给个例子让大家好理解：
                    <div onclick="alert(this.style.float);  
                                this.style.float='left';  
                               alert(this.style.float);">测试1

                     </div> 

               <div onclick="alert(this.style.float);  
                    if(this.style.cssFloat)

                      {

                        this.style.cssFloat='left';  
                        }

                   else {

                          this.style.styleFloat='left';  

                         }

                         alert(this.style.float);">测试2

              </div>