js學習
以後堅持一日一更，和大家分享我每天學習的成果及經驗，讓想要學習的小夥伴少走彎路。
關鍵詞： offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent、吸頂
一、offsetWidth
offsetWidth:直接返回元素本身的寬度(padding+border+content之和)
二、offsetHeight
offsetHeight:直接返回元素本身的高度(padding+border+content之和)
以上兩種方法只和該元素有關，和周圍元素無關（父元素和子元素）
注意：
變量.offsetWidth/Height和變量.style.Width/Height的區別：
變量.style.Width/Height只能獲取行內樣式
變量.style.Width/Height是字符串，有像素(px)單位的；變量.offsetWidth/Height是數值，沒有單位
變量.style.Width/Height可以設置元素寬高，變量.offsetWidth/Height只能讀取元素寬高，不能設置
三、offsetLeft
offsetLeft：該方法返回元素邊界的左上角頂點相對於有定位的父元素的水平偏移量
四、offsetTop
offsetTop：該方法返回元素邊界的左上角頂點相對於有定位的父元素的垂直偏移量
注意：
變量.offsetLeft/Top和變量.style.left/top的區別：
變量.style.left/top只能獲取行內樣式
變量.style.left/top是字符串，有像素（px）單位；變量.offsetLeft/Top是數值，沒有單位
變量.style.left/top獲取的值和變量.offsetWidth/Height獲取到的值在組成部分上是有區別
五、offsetParent
offsetParent:返回該元素的父元素
注意：
offsetParent和parentNode的區別：
offsetParent指向的是有定位的父元素，沒有定位就指向body
parentNode指向的是相對於元素最近的父元素
<style>
*{margin: 0;padding: 0;}
body{width: 100%;height: 100%;}
.parent{
background: red;
width: 500px;
height: 500px;
margin:100px auto;
padding: 20px;
border: 1px solid black;
}
.child{
width: 200px;
height: 200px;
margin:150px auto;
background: yellow;
padding: 10px;
border: 3px solid black;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
<script>
/*
offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent
offsetWidth:直接返回元素本身的寬度(padding+border+content之和)
offsetHeight:直接返回元素本身的高度
以上兩種方法只和該元素有關，和周圍元素無關（父元素和子元素）
* */
var par = document.getElementsByClassName("parent")[0];
console.log(par.offsetWidth);//542
console.log(par.offsetHeight);//542
/*
offsetParent:返回該元素的父元素
offsetLeft：該方法返回元素邊界的左上角頂點相對於有定位的父元素的水平偏移量
offsetTop：該方法返回元素邊界的左上角頂點相對於有定位的父元素的垂直偏移量
* */
console.log(par.offsetParent);
console.log(par.offsetLeft);//496
console.log(par.offsetTop);//100
var chi = document.getElementsByClassName("child")[0];
console.log(chi.offsetTop);//271
//距離有定位的父元素高度，高度包括(元素本身的margin值+父元素的margin值+padding值+boder值+內容所佔高度)
console.log(chi.offsetLeft);//654
//距離有定位的父元素的寬度
//clientWidth,clientHeight,clientLeft,clientTop
console.log(par.clientWidth);//par.clientWidth 返回元素實際寬度（content+左右padding）
console.log(par.clientHeight);//par.clientHeight 返回元素實際寬度（content+上下padding）
console.log(par.clientLeft);//返回左邊border的寬度
console.log(par.clientTop);//返回上邊border的寬度
//scrollWidth,scrollHeight,scrollLeft,scrollTop
console.log(par.scrollWidth);//獲取指定標籤內容的真實寬度（可視區域的寬度+贏藏區域的寬度）
console.log(par.scrollHeight);//獲取指定標籤內容的真實高度（可視區域的寬度+隱藏區域的高度）
console.log(par.scrollLeft);//內容層左端到可視區域左端的距離
console.log(par.scrollTop);//內容層上端到可視區域頂端的距離
console.log(chi.scrollLeft);
console.log(chi.scrollTop);
</script>
六、吸頂
js:
<script>
var xx = document.getElementsByClassName("xd")[0];
var jl = xx.offsetTop;
window.onscroll = function(){
var gd = document.documentElement.scrollTop;
if(gd>=jl){
xx.style.position = "fixed";
xx.style.top = "0px";
}else{
xx.style.position = "static";
}
}
</script>
CSS:
.xd{
width: 100%;
height: 50px;
background: blue;
}
Html
<body>
<div style="height: 50px;width: 50px;"></div>
<div class="xd"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>