通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况

  <!DOCTYPE html>
  <html lang="en">
   
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  div {
  width: 100px;
  height: 100px;
  background-color: pink;
  }
   
  .change {
  background-color: purple;
  color: #fff;
  font-size: 25px;
  margin-top: 100px;
  }
  </style>
  </head>
   
   
  <body>
  <div class="first">文本</div>
  <script>
  // 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
  var test = document.querySelector('div');
  test.onclick = function() {
  // this.style.backgroundColor = 'purple';
  // this.style.color = '#fff';
  // this.style.fontSize = '25px';
  // this.style.marginTop = '100px';
  // 让我们当前元素的类名改为了 change
   
  // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
  // 3. 如果想要保留原先的类名,我们可以这么做 多类名选择器
  // this.className = 'change';
  this.className = 'first change';
  }
  </script>
  </body>
   
  </html>
上一篇:反射和javaweb注解开发


下一篇:后台管理页面布局、web页面布局