Content description: Use three buttons to change the style of a div, and use js to implement it. For modifying different styles, two parameters are required, one is the style name, and the other is the style value, but you can only use it when modifying
v1.style[name] = value; cannot use v1.style.name = value;
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
border: 1px solid gray;
}
</style>
<script>
function f(name, value) {
var v1 = document.getElementById("div1");
v1.style[name] = value;
}
</script>
</head>
<body>
<input type="button" onclick="f('width','400px')" value="变宽">
<input type="button" onclick="f('backgroundColor','red')" value="变红">
<input type="button" onclick="f('display','none')" value="隐藏">
<div id="div1"></div>
</body>
</html>Renderings:
Initial image:
Widen:
turn red:
hide:
