<!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>
2020-04-09
一個頁面有多個window.onload 會有沖突，后面的會覆蓋前面的，建議你只寫一個window.onload，