JS示例04-属性控制方式二
- 2019 年 11 月 7 日
- 笔记
一、知识要点
1、属性控制 [ ]
二、源码参考
<!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 btn2 = document.getElementById('btn2'); var div1 = document.getElementById('div1'); function setStyle(name, value) { div1.style[name] = value; // 通过[]改变属性 } btn1.onclick = function() { setStyle('background', 'red'); } btn2.onclick = function() { setStyle('background', 'green'); } } </script> </head> <body> <input type="button" name="btn1" id="btn1" value="变红" /> <input type="button" name="btn2" id="btn2" value="变绿" /> <div id="div1"> </div> </body> </html>
三、运行效果
QQ20190328-163137.gif
