JS示例03-属性控制方式一

  • 2019 年 11 月 7 日
  • 筆記

一、知识要点

1、属性控制 2、className动态设置

二、源码参考

<!DOCTYPE >  <html>        <head>          <title></title>          <meta charset="utf-8">          <style>              #div1 {                  width: 200px;                  height: 100px;                  border: 1px solid #999;              }                .boxred {                  background: red;              }          </style>          <script>              window.onload = function() {                  var btn1 = document.getElementById('btn1');                  var div1 = document.getElementById('div1');                    btn1.onclick = function() {                      div1.className = 'boxred';                  }              }          </script>      </head>        <body>          <input type="button" name="btn1" id="btn1" value="变红" />          <div id="div1">            </div>      </body>    </html>

三、运行效果

image