HTML、CSS及JavaScript：JavaScript征服Style的五种武器_html/cs

在HTML的世界里，对于一个元素来说，看的主要不是气质，而是它的Style，因为Style决定了颜值。俗话说，JavaScript与Style，得其一者得天下。但是，Style永远无法改变JavaScript，JavaScript却可以征服Style。因为JavaScript有五种武器，所以可以对Style为所欲为，既可远观，亦可亵玩。

第一种武器是 className，在JavaScript，得到一个元素的 className就是得到了这个元素的 class属性的值。Show Code：

   var box = document.getElementById("box")  alert(box.className)  box.className += ' three'  

上面的代码拿到 box的 class，然后又给它添加了一个 three。如果想去掉某个 class，只要通过字符串操作去掉，然后重新给 className赋值就可以了。

第二种武器是 style，确切地说，这是个武器包，你几乎可以用它修改所有 style。比如说你执行了 box.style.width='100px'，就相当于在 box上添加了一个 style="width:100px"。

对于那些由多个单词组成的style值，就是 background-color、 marigin-top之类的，要把横线去掉，然后单词的首字母大写。对，改成像 backgroundColor、 mariginTop这样。像 -moz-border-radius这种，也是把 -去掉，然后后面的字母换成大写，就是改成 MozBorderRadius。

因为style属性优先与css，所以你可以用style覆盖掉css中设置的样式，也可以把它设成空字符串还原：

var box = document.getElementById("box")box.style.width='100px'box.style.width='' 

上面的代码最终会保持box的 width不变。

第三种武器是 cssText，好吧，实际上它也是style中的一个属性。但因为它很强大，所以我们特意提高了它的地位。用 style.cssText可以获取和设置完整的style内容。

Button

      
查看更多关于HTML、CSS及JavaScript：JavaScript征服Style的五种武器_html/cs的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112523