一、知识要点
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
网友评论