HTML and CSS Reference
In-Depth Information
EXAMPLE
14.30 (
CONTINUED
)
.pos2 {position:absolute; top:100px;left:10px;
background-color:teal;
}
.pos3 {position:absolute; top:150px;left:10px;
background-color:darkblue;
}
</style>
<script type="text/javascript">
2
var div1,div2,div3
;
3
window.onload=function()
{
4
div1=document.getElementById("first");
div2=document.getElementById("second");
div3=document.getElementById("third");
}
5
function startPosition(){
div1.style.top = 50;
div1.style.left=10;
div2.style.top = 100;
div2.style.left=10;
div3.style.top = 150;
div3.style.left=10;
}
6
function movePosition(){
7
div1.style.left = 50;
div1.style.top = 150;
8
div2.style.left = 100;
div2.style.top = 100;
9
div3.style.left = 150;
div3.style.top = 50;
}
</script>
</head>
<body>
10
<div id="first" class="pos1">one</div>
<div id="second" class="pos2">two</div>
<div id="third"
class="pos3">three</div>
<form>
11
<input type="button" value="move text"
onClick="movePosition()
">
<input type="button" value="put it back"
onClick="startPosition()
">
</form>
</body>
</html>
