读书人

js中设立样式的几种方式(setAttribut

发布时间: 2012-08-27 21:21:57 作者: rapoo

js中设置样式的几种方式(setAttribute,className)

以设置背景色为例子


可以用单一的backgroundColor
可以用className
可以用setAttribute(setAttribute和 removeAttribute)为一组

实例代码(实现效果点击一个按钮,就把整个背景色替换,点击其他的就换其他的)

<html><head><title></title><style type="text/css">    .bg{        background-color : "blue" ;    }    </style><script language="javascript" type="text/javascript">    window.onload = function(){            $("redC").onclick = function(){            document.body.removeAttribute("className","bg");            document.body.style.backgroundColor = "red";        }         $("blueC").onclick = function(){            document.body.style.backgroundColor = "";                       document.body.setAttribute("className","bg");//            document.body.className = "bg";        }                $("pinkC").onclick = function(){          document.body.removeAttribute("className","bg");            document.body.style.backgroundColor = "pink";        }                $("blackC").onclick = function(){          document.body.removeAttribute("className","bg");            document.body.style.backgroundColor = "black";        }    }        function $(uid){        return document.getElementById(uid);    }</script></head><body><input type="button" value="red" id="redC"/><input type="button" value="blue" id="blueC"/><input type="button" value="pink" id="pinkC"/><input type="button" value="black" id="blackC"/></body></html>


读书人网 >JavaScript

热点推荐