事件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的使用</title>
<style>
fieldset{
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<fieldset>
<legend>控制页面背景色</legend>
<div class="btns">
<button id="red">红色</button>
<button id="blue">蓝色</button>
<button id="green">绿色</button>
</div>
</fieldset>
<script>
var btnRed = document.getElementById("red");
var btnBlue = document.getElementById("blue")
var btnGreen = document.getElementById("green");
btnRed.onclick = function(){
document.body.style.backgroundColor = "red";
}
btnBlue.onclick = function(){
document.body.style.backgroundColor = "blue";
}
btnGreen.onclick = function(){
document.body.style.backgroundColor = "green";
}
</script>
</body>
</html>
单选框切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选radios</title>
<style>
#pic{
width: 300px;
margin: 0 auto;
border: solid 1px red;
}
#pic input{
margin-right: 45px;
}
</style>
</head>
<body>
<div id="pic">
<div class="img">
<img id="img" width="300px" src="imgs/gm1-6.jpg" alt="">
</div>
<fieldset>
<legend>选择按钮</legend>
<input checked type="radio" name="pic" id="pic1">
<input type="radio" name="pic" id="pic2">
<input type="radio" name="pic" id="pic3">
<input type="radio" name="pic" id="pic4">
</fieldset>
</div>
<script>
var btnPic1 = document.getElementById("pic1");
var btnPic2 = document.getElementById("pic2");
var btnPic3 = document.getElementById("pic3");
var btnPic4 = document.getElementById("pic4");
var imgShow = document.getElementById("img");
btnPic1.onclick = function(){
imgShow.setAttribute("src", "imgs/gm1-6.jpg")
}
btnPic2.onclick = function(){
imgShow.setAttribute("src", "imgs/gm2-6.jpg")
}
btnPic3.onclick = function(){
imgShow.setAttribute("src", "imgs/gm3-6.jpg")
}
btnPic4.onclick = function(){
imgShow.setAttribute("src", "imgs/gm4-6.jpg")
}
</script>
</body>
</html>