慕函数1257581
2020-04-01 15:25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Position Elements</title> <style> #txy{position: absolute; border: 2px solid black; width: 200px; height: 200px; margin-left: 100px; margin-top: 20px; background-color: rgb(224,224,224);} #btt{} </style> <script> window.onload=function trn1() { var left = document.getElementById("left"); var txy = document.getElementById("txy"); left.onclick = function () { txy.style.left = (txy.offsetLeft - 10) + "px" } }; window.onload=function trn5() { var right = document.getElementById("right"); var txy = document.getElementById("txy"); right.onclick = function () { txy.style.left = (txy.offsetLeft+10) + "px" } }; window.onload=function trn4() { var show = document.getElementById("show"); var txy = document.getElementById("txy"); show.onmouseover = function () { txy.style.display = "none" }; show.onmouseout = function () { txy.style.display = "block" }; }; window.onload=function trn3() { var up = document.getElementById("up"); var txy = document.getElementById("txy"); up.onclick = function () { txy.style.top = (txy.offsetTop - 10) + "px" }; }; window.onload=function trn2() { var down = document.getElementById("down"); var txy = document.getElementById("txy"); down.onclick = function () { txy.style.top = (txy.offsetTop+10) + "px" } } </script> </head> <body> <div id="txy">This square is an absolutely positioned layer that you can move using the buttons above.</div> <div ID="btt"> <button id="left"><-Left</button> <button id="right">right-> </button> <button id="up">Up</button> <button id="down">Down</button> <button id="show">Show</button> <button id="move">Move</button> </div> </body> </html>
一个页面有多个window.onload 会有冲突,后面的会覆盖前面的,建议你只写一个window.onload,
function trn1 到trn5 都写进一个window.onload里面
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题
回答 3
回答 7