<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="element012.js" type="text/javascript"></script>
<style>
div.demo {
margin: 5px;
border: black solid 5px;
}
#first{
margin-top: 5px;
}
#third{
height:50px;
}
</style>
</head>
<body>
<div class="demo" id="first">
<div class="demo" id="second">
<div class="demo" id="third">
123
</div>
</div>
</div>
<div>div1 height: <span id="div1_height"></span></div>
<div>div1 offsetHeight: <span id="div1_offsetHeight"></span></div>
<div>div1 offsetLeft: <span id="div1_offsetLeft"></span></div>
<div>div1 offsetTop: <span id="div1_offsetTop"></span></div>
<div>div1 offsetWidth: <span id="div1_offsetWidth"></span></div>
<div>div1 borderTopWidth: <span id="div1_borderTopWidth"></span></div>
<BR>
<div>div2 height: <span id="div2_height"></span></div>
<div>div2 offsetHeight: <span id="div2_offsetHeight"></span></div>
<div>div2 offsetLeft: <span id="div2_offsetLeft"></span></div>
<div>div2 offsetTop: <span id="div2_offsetTop"></span></div>
<div>div2 offsetWidth: <span id="div2_offsetWidth"></span></div>
<div>div1 borderTopWidth: <span id="div2_borderTopWidth"></span></div>
<BR>
<div>div3_offsetParent_tagName: <span id="div3_offsetParent_tagName"></span></div>
<script type="text/javascript">
// 參考 http://pydoing.blogspot.tw/2011/09/javascript-offsetleft.html
function run() {
var div1 = document.getElementById("first");
var div2 = document.getElementById("second");
var div3 = document.getElementById("third");
document.getElementById("div1_height").innerHTML = document.defaultView.getComputedStyle(div1, null)['height'];
document.getElementById("div1_offsetLeft").innerHTML = div1.offsetLeft;
document.getElementById("div1_offsetTop").innerHTML = div1.offsetTop;
document.getElementById("div1_offsetWidth").innerHTML = div1.offsetWidth;
document.getElementById("div1_offsetHeight").innerHTML = div1.offsetHeight;
document.getElementById("div1_borderTopWidth").innerHTML = document.defaultView.getComputedStyle(div1, null)['borderTopWidth'];
document.getElementById("div2_height").innerHTML = document.defaultView.getComputedStyle(div2, null)['height'];
document.getElementById("div2_offsetLeft").innerHTML = div2.offsetLeft;
document.getElementById("div2_offsetTop").innerHTML = div2.offsetTop;
document.getElementById("div2_offsetWidth").innerHTML = div2.offsetWidth;
document.getElementById("div2_offsetHeight").innerHTML = div2.offsetHeight;
document.getElementById("div2_borderTopWidth").innerHTML = document.defaultView.getComputedStyle(div1, null)['borderTopWidth'];
document.getElementById("div3_offsetParent_tagName").innerHTML = div3.offsetParent.tagName;
}
run();
</script>
</body>
</html>
結果：
div1 height: 90px
div1 offsetHeight: 100
div1 offsetLeft: 13
div1 offsetTop: 8
div1 offsetWidth: 1340
div1 borderTopWidth: 5px
div2 height: 70px
div2 height: 70px
div2 offsetHeight: 80
div2 offsetLeft: 23
div2 offsetTop: 18
div2 offsetWidth: 1320
div1 borderTopWidth: 5px
div3_offsetParent_tagName: BODY
div3_offsetParent_tagName: BODY
沒有留言:
張貼留言