标签：style 样式 元素 100px className color change
| <!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> |
标签：style,样式,元素,100px,className,color,change 来源： https://www.cnblogs.com/ericblog1992/p/13051111.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。