动态修改css样式

一：使用obj.className 来修改样式表的类名

  1. function changeStyle1(){
  2.     var obj = document.getElementById("btn")
  3.     obj.style.background = "black"
  4. }

二：使用obj.style.cssText

  1. function changeStyle2(){
  2.     var obj = document.getElementById("btn")
  3.     obj.style.cssText = "dispaly:block"
  4. }

三：使用obj.className 来修改样式表的

  1. function changeStyle3{
  2.     var obj = document.getElementById("btn")
  3.     // obj.classNme = "style2"
  4.     obj.setAttribute("class","style2")
  5. }

四：使用更改外联的css文件，从而改变元素的css

  1. <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
  3. function changeStyle4() {
  4.    var obj = document.getElementById("css");
  5.    obj.setAttribute("href","css2.css");
  6.  }
  8. 可以实现整个页面换肤的最佳方案

补充 element.setAttribute(name,value) name: 表示属性名称的字符串

补充 cssText 即设置 html 元素的 style 的属性值 会直接覆盖 如果需要累加 则 写 +=

事件委托或事件代理