JavaScript屬性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWid

一顆白菜發表於2018-04-25
JavaScriptclient

1.offsetLeft和offsetTop

只讀屬性，返回當前元素與父輩元素之間的距離（不包括邊框）。其中父輩元素的取法是有門道的：

(1).若父輩元素中有定位的元素，那麼就返回距離當前元素最近的定位元素的距離。

(2).若父輩元素中沒有定位元素，那麼就返回相對於body的距離。

(3).若當前元素具有固定定位(position:fixed;)，那麼返回的是當前元素與可視視窗的距離。

<div id="a" style="width:400px;height:400px;margin:100px auto 0;background-color: red;">
    <div id="b" style="position:relative;width:200px;height:200px;margin:100px auto 0;background-color: blue;">
        <div id="c" style="position: fixed;width:50px;height:50px;top:200px;left: 200px;background-color: green;"></div>
        <div id="d" style="position: absolute;top:50px;left: 50px;height:100px;width:100px;background-color: yellow">
            <div id="e" style="width:50px;height:50px;margin:25px auto 0;background-color: darkred;"></div>
        </div>
    </div>
</div>

<script>
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    var c=document.getElementById("c");
    var d=document.getElementById("d");
    var e=document.getElementById("e");

    console.log("e:"+ e.offsetLeft, e.offsetTop);// e: 25,25。以具有絕對定位的父輩元素d為參照
    console.log("d:"+ d.offsetLeft, d.offsetTop);// d: 50,50。以其相對定位的父元素b為參照
    console.log("c:"+ c.offsetLeft, c.offsetTop);// c: 200,200。以可視視窗為參照
    console.log("b:"+ b.offsetLeft, b.offsetTop);// b: 612,100。以body為參照
    console.log("a:"+ a.offsetLeft, a.offsetTop);// a: 512,100。以body為參照
</script>
複製程式碼

2.offsetHeight、offsetWidth和style.height、style.width區別

  • offsetHeight、offsetWidth返回的是數值；style.height、style.width返回的是字串，單位是“px”

  • offsetHeight、offsetWidth只讀；style.height、style.width可讀寫

  • offsetHeight、offsetWidth包括元素的邊框、內邊距；offsetWidth=leftborder+leftpadding+width+rightpadding+rightborder；

  • style.height、style.width只包括元素height、width

  • 如果沒有為元素設定高度，offsetHeight會根據內容獲取高度值，style.height會返回undefind

  • jquery中使用$(obj).height()、$(obj).css('height')來獲取元素的高度,返回的是一個帶有單位的字串

     <div id="a" style="width:50px;height:50px;border:5px solid red;padding:10px;margin:50px;background: black;"></div>
 <script>
     var a=document.getElementById("a");
     console.log(a.offsetHeight, a.offsetWidth);//80,80
     console.log(a.style.height, a.style.width);//50px,50px
 </script>
複製程式碼

3.clientWidth和clientHeight

只讀屬性，返回當前節點的可視寬度和可視高度（不包括邊框、外邊距）（包括內邊距）clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

    <div id="a" style="width:100px;height:50px;border:25px solid blue;background-color:red;overflow: auto;">
        hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br>
    </div>
    <script>
        var a=document.getElementById("a");
        console.log("a:"+ a.clientWidth, a.clientHeight);// a: 83,50。不包括邊框和滾動條(17px)
    </script>
複製程式碼

4.scrollWidth和scrolltHeight

只讀屬性，返回當前節點的實際寬度和實際高度（不包括邊框）,沒有滾動條時和clientWidth和clientHeight一樣

上例中：
console.log("a:"+ a.scrollWidth, a.scrollHeight);// a: 83,324。不包括邊框和滾動條的寬度，返回實際高度和寬度
複製程式碼

5.scrollTop和scrollLeft

可讀寫屬性 scrollTop：返回網頁滾動條垂直方向滾去的距離； scrollLeft：返回網頁滾動條水平方向滾去的距離；

6.innerHeight和innerWidth

只讀屬性，返回視窗文件顯示區的高度和寬度，不包括選單欄、工具欄和滾動條的寬高。 IE不支援這些屬性。它用document.documentElement 或 document.body （與 IE 的版本相關）的 clientWidth和 clientHeight屬性作為替代。

7.outerrHeight和outerWidth

outerHeight屬性設定或返回一個視窗的高度，包括所有介面元素（如工具欄/滾動條）。 outerWidth屬性設定或返回視窗的寬度，包括所有的介面元素（如工具欄/滾動）。

相關文章