<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0; padding: 0} .box1{ width: 1000px; height: 700px; margin: 50px auto; box-sizing: border-box; padding: 1px; background-image: url("img/1.jpg")} .box2{ width: 500px; height: 400px; margin: auto; box-sizing: border-box; padding: 1px; border: 3px solid black} .fox1{ width: 400px; height: 30px; margin: auto; border-bottom:1px solid black; } .fox2{ width: 400px; height: 300px; margin: 0 auto;} .input1{ margin: 30px auto; } </style> </head> <body> <div class="box1" id="a"> <div class="box2"> <div class="fox1"> <span>可以換膚的提示框:</span> <input type="button" value="換膚1" id="a1"> <input type="button" value="換膚2" id="a2"> </div> <div class="fox2"> 輸入姓名: <input type="text"> <br> 輸入密碼:<input type="password"> <br> 留言: <textarea name="" id="" cols="30" rows="10"></textarea> <br> <input class="input1" type="submit"> </div> </div> </div> <script> b1=document.getElementById("a1"); b2=document.getElementById("a2"); b1.onclick=function () {a.style.background="url(img/1.jpg)";} b2.onclick=function () {a.style.background="url(img/0.jpg)"; } </script> </body> </html>
js實現點擊按鈕換膚效果
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.