动态修改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"/>
  2. function changeStyle4() {
  3. var obj = document.getElementById("css");
  4. obj.setAttribute("href","css2.css");
  5. }
  6. 可以实现整个页面换肤的最佳方案

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

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

事件委托或事件代理