<!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> .set_bg_con{ width: 440px; height: 40px; border: 1px solid #ddd; margin: 40px auto 0; background-color: #fff; } .set_text{ line-height: 40px; float: left; margin: 2 20px 0 10px; color: #666; } .style1,.style2,.style3,.style4,.style5,.style6{ width: 30px; height: 26px; margin: 8px 5px; background: gold; cursor: pointer; float: left; } .style1{ background:#0181cc; } .style2{ background:#00b9f1; } .style3{ background:#ef8201; } .style4{ background:#8fc320; } .style5{ background:#e84191; } .style6{ background:#ee87b4; } </style> <script> window.onload = function(){ var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var oBtn4 = document.getElementById('btn4'); var oBtn5 = document.getElementById('btn5'); var oBtn6 = document.getElementById('btn6'); var oBody = document.getElementById('body'); oBtn1.onclick = function(){ oBody.style.background = '#0181cc'; } oBtn2.onclick = function(){ oBody.style.background = '#00b9f1'; } oBtn3.onclick = function(){ oBody.style.background = '#ef8201'; } oBtn4.onclick = function(){ oBody.style.background = '#8fc320'; } oBtn5.onclick = function(){ oBody.style.background = '#ee87b4'; } oBtn6.onclick = function(){ oBody.style.background = '#0181cc'; } } </script> </head> <body id="body"> <div class="set_bg_con"> <div class="set_text">请选择网页的背景色:</div> <div class="style1" id="btn1"></div> <div class="style2" id="btn2"></div> <div class="style3" id="btn3"></div> <div class="style4" id="btn4"></div> <div class="style5" id="btn5"></div> <div class="style6" id="btn6"></div> </div> </body> </html>
js更换背景图
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80762373
今日推荐
周排行