| <!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> |