offset大家族 ...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>offset大家族</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
.grandpa{
margin-left:50px;
width:500px;
height:300px;
background:#ff9933;
position:relative;
border:5px solid #33ff00;
}
.father{
width:300px;
height:300px;
background:#ff3366;
padding:20px;
border:5px solid #ffff00;
}
.son{
width:100px;
height:100px;
background:#0000ff;
padding:10px;
border:5px solid #ccffcc;
}
</style>
</head>
<body>
<div class="grandpa">
<div class="father" style="position:absolute;left:300px">
<div class="son" style="left:300px" ></div>
</div>
</div>
<script type="text/javascript">
var father=document.querySelector(".father");
var grandpa=document.querySelector(".grandpa");
var son=document.querySelector(".son");
console.log(son.offsetWidth);//130
console.log(son.offsetHeight);//130
console.log(son.offsetLeft);//25
console.log(son.offsetTop);//25
console.log(son.offsetParent.className);//grandpa
console.log(son.parentNode);//<div class="father"></div>
console.log(son.style.left);//300px 這裡雖然獲得300px 但是由於沒有設置position屬性所以不起作用
console.log(father.style.left);//300px
son.offsetLeft="300";
console.log(son.offsetLeft);//20
son.style.left="500px";
console.log(son.style.left);
/*
offsetWidth 元素本身的寬度 content+padding+border 動態
offsetHeight 元素本身的高度 content+padding+border 動態
offsetLeft 此元素左外邊框到有定位的長輩的邊框距離 就近長輩
offsetTop 此元素右外邊框到有定位的長輩的邊框距離 就近長輩
js沒有right 和 bottom
所以 right=son.offsetLeft+son.offsetWidth
top=son.offsetTop+son.offsetHeight
1. son.style.left 訪問的話只能得到行內的style值
這樣的div class="son" style="position:absolute;top:300px"></div>
2. 行內樣式如果沒有設置top值 style.top 得到的是空字元串 ""
3.offsetLeft 得到的是數字 30 而style.left得到的是字元串 30px
4.offsetLeft 是 onlyRead 就是只可以get 不能set style.left 可以set 也可以get
5.offsetLeft 可以返回沒有設置定位屬性盒子的left
而style.left 不行 沒有設置定位屬性的盒子沒有left top屬性
雖然可以獲得行內設置的left style.left 300px
<div class="box" style="left:300px"></div>
但是沒有作用 因為沒有設置position
5.
如果想訪問css style 還可以用以下方法
標準瀏覽器window.getComputedStyle(son)["left"];
IE son.currentStyle("left");
offsetParent 得到最近的有定位的長輩
比較記憶
parentNode 得到父節點
*/
</script>
</body>
</html>
