首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-08-27 
js中设置样式的几种方式(setAttribute,className)以设置背景色为例子可以用单一的backgroundColor可以用cl

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>


 

热点排行