master

分支 (1)

管理

管理

master

HR
/
换肤.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo{
      color:red;
    }
    .ceshi{
      background:red;
    }
  </style>
  <script>
    // 1. 获取原始的css样式得到一个大的字符串 ajax获取
    // 2. 根据你当前要替换的，用正则去替换得到一个新的字符串
    // 3. document.head.appendChild(newStyle) 后面 权重更高一点

    function change(color){
       var text = document.querySelector('style').innerText
       var reg = /:(.*);/g
      //  console.log(reg.exec(text)[1])
      var newCss = text.replace(reg.exec(text)[1],color).replace(reg.exec(text)[1],color)
      var newStyle = document.createElement('style')
      newStyle.innerText = newCss
      document.head.appendChild(newStyle)
    }
  </script>
</head>
<body>
  <button onclick="change('red')">红</button>
  <button onclick="change('blue')">蓝</button>
  <div class="demo">2</div>
  <div class="ceshi">1</div>
</body>
</html>