介紹JavaScript的offset、client、scroll家族屬性-js教程-PHP中文網

首頁

web前端

js教程

介紹JavaScript的offset、client、scroll家族屬性

coldplay.xixi

Oct 29, 2020 pm 05:12 PM

clientjavascriptoffsetscroll

javascript欄位介紹offset、 client、scroll家族屬性。

介紹JavaScript的offset、client、scroll家族屬性

##offset家族

偏移量(offset維度)是javascript中的一個重要涉及偏移量的主要是

offsetLeft、offsetTop、offsetHeight、offsetWidth這四個屬性。當然，還有有一個偏移參考——定位父級offsetParent。本文將詳細介紹該部分內容

#定位父級

在理解偏移大小之前，首先要理解offsetParent。並沒有把offsetParent翻譯為偏移父級，而是人們翻譯成定位父級，很大原因是offsetParent與定位有關

定位父級offsetParent的定義是：

與當前元素最近的經過定位(位置不等於靜態)的父級元素，主要分為以下幾種情況

#元素本身有固定定位，offsetParent的結果為null
當元素本身有固定定位時，我們知道固定定位的元素相對於視口進行定位，此時沒有定位父級，offsetParent的結果為null

【注意】firefox瀏覽器有相容性問題

<p></p>    <script>
   var test = document.getElementById(&#39;test&#39;);   //firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
   console.log(test.offsetParent);</script>复制代码

<p></p>    <script>
    var test = document.getElementById(&#39;test&#39;);    console.log(test.offsetParent);//<body></script>复制代码

<p>
    </p><p>
        </p><p></p>
    <script>
    var test = document.getElementById(&#39;test&#39;);    // 距离该子元素最近的进行过定位的父元素,如果其父元素不存在定位则offsetParent为:body元素;
    console.log(test.offsetParent);</script>复制代码

元素的offsetParent為null

console.log(document.body.offsetParent);//null复制代码

偏移量共包含了offsetHeight、offsetWidth、offsetLeft、offsetTop 這四個屬性

offsetWidth

offsetWidth 表示元素在水平方向上佔用的空間大小，無單位(以像素px計)

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 
复制代码

offsetHeight

　　offsetHeight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)

offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width复制代码

测试：

nbsp;html>
	
		<meta>
		<title>Title</title>
		<style>
			#box {				width: 200px;				height: 150px;				background-color: red;				padding: 10px;				border: 5px solid #ddd;				margin: 10px;
			}		</style>
	
	
		<p></p>
		<script>
			var box = document.getElementById(&#39;box&#39;);			//offsetHeight = 内容高 + 上下内边距 + 边框
			console.log(box.offsetWidth,box.offsetHeight);			console.log(box.style.width, box.style.height);			// 可以设置大小
			// box.style.width = 500 + &#39;px&#39;;
			// 不可以设置大小
			box.offsetWidth = 100 + &#39;px&#39;;		</script>

	复制代码

注意：如果想修改盒子的大小，请使用xxx.style.width进行设置。offsetWidth和offsetHeight是只读属性

offsetTop

　　offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

offsetLeft

　　offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

测试:

nbsp;html>
	
		<meta>
		<title></title>
		<style>
			*{				padding: 0;				margin: 0;
			}			#father{				width: 400px;				height: 400px;				background-color: red;				/* position: relative; */
				margin: 40px;
			}			#son {				width: 200px;				height: 100px;				background-color: green;				padding: 10px;				border: 5px solid #DA70D6;				margin-left: 20px;
			}		</style>
	
	
		<p>
			</p><p></p>
		
		<script>
			var box = document.getElementById(&#39;son&#39;);            //如果有父级定位元素
			console.log(box.offsetLeft);//20
			console.log(box.offsetTop); //0
			//如果无父级定位元素
			console.log(box.offsetLeft);//60
			console.log(box.offsetTop); //40
		</script>
	复制代码

总结：相对于父元素（看父元素是否有定位，如果有定位，以父元素为基础，如果没有继续往上寻找，如果一直没有找到，则以body为基准）的左边距和上边距

求出当前元素的页面偏移量

要知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，并加上offsetParent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量

<p>
    </p><p></p><script>
    var test = document.getElementById(&#39;test&#39;);    console.log(getElementLeft(test)); //39px
    console.log(getElementTop(test)); // 39px

    function getElementLeft(ele){        var actualLeft  = ele.offsetLeft;        var parent = ele.offsetParent;        while (parent != null){
            actualLeft = actualLeft + parent.offsetLeft + parent.clientLeft;
            parent = parent.offsetParent;
        }        return actualLeft + &#39;px&#39;;
    }    function getElementTop(ele){        var actualTop  = ele.offsetTop;        var parent = ele.offsetParent;        while (parent != null){
            actualTop = actualTop + parent.offsetTop + parent.clientTop;
            parent = parent.offsetParent;
        }        return actualTop + &#39;px&#39;;
    }</script>复制代码

client家族

关于元素尺寸，一般地，有偏移大小offset、客户端大小client和滚动大小scroll。前文已经介绍过偏移属性，后文将介绍scroll滚动大小，本文主要介绍客户区大小client。

客户区大小

客户区大小client指的是元素内容及其内边距所占据的空间大小

clientWidth

clientHeight属性返回元素节点的客户区高度

clientHeight = padding-top + height + padding-bottom复制代码

clientHeight

clientWidth属性返回元素节点的客户区宽度

clientWidth = padding-left + width + padding-right复制代码

clientLeft

clientLeft属性返回左边框的宽度复制代码

clientTop

clientTop属性返回上边框的宽度	
复制代码

验证

<p></p><script>
    var box = document.getElementById(&#39;box&#39;);    console.log(box.clientWidth);// 200+ 20+ 20 = 240
    console.log(box.clientHeight); //200 + 20 + 20 = 240
    console.log(box.clientLeft);//1
    console.log(box.clientTop);//1</script>复制代码

页面大小

常用document.documentElement的client属性来表示页面大小(不包含滚动条宽度)

document.documentElement.clientWidth;document.documentElement.clientHeight;复制代码

注意

1.所有的client属性都是只读的

<p></p><script>
    var test = document.getElementById(&#39;test&#39;);    console.log(test.clientHeight);    //静态失败了
    test.clientHeight = 10;    console.log(test.clientHeight);</script>复制代码

2.如果给元素设置了display:none，则客户区client属性都为0

<p></p><script>
    var test = document.getElementById(&#39;test&#39;);    console.log(test.clientHeight);//0
    console.log(test.clientTop);//0</script>复制代码

3.每次访问客户区client属性都需要重新计算，重复访问需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能

<p></p>      <script>
    var test = document.getElementById(&#39;test&#39;);    console.time("time");    for(var i = 0; i < 100000; i++){        var a = test.clientHeight;
    }    console.timeEnd(&#39;time&#39;);//66.798ms</script>复制代码

<p></p>         
<script>
    var test = document.getElementById(&#39;test&#39;);
    console.time("time");
    var a = test.clientHeight;
    for(var i = 0; i < 100000; i++){
        var b = a;
    }
    console.timeEnd(&#39;time&#39;);//1.705ms
</script>复制代码

scroll家族

滚动宽高

scrollHeight

　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

scrollWidth

　　scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等

<p></p><script>
    var test = document.getElementById(&#39;test&#39;);    //120 120
    console.log(test.scrollHeight,test.scrollWidth);    //120 120
    console.log(test.clientHeight,test.clientWidth);</script>复制代码

存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等

<p></p><script>
    var test = document.getElementById(&#39;test&#39;);    //120 120
    console.log(test.scrollHeight,test.scrollWidth);    //120 120
    console.log(test.clientHeight,test.clientWidth);</script>复制代码

滚动长度

scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，表示元素上方不可见内容的像素高度

scrollLeft

scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度

当滚动条滚动到内容底部时，符合以下等式

scrollHeight = scrollTop + clientHight复制代码

与scrollHeight和scrollWidth属性不同的是，scrollLeft和scrollTop是可写的

<p>
    内容<br>内容<br></p><button>向下滚动</button><button>向上滚动</button><script>
    // scrollLeft和scrollTop是可读写的
    var btn1 = document.getElementById(&#39;btn1&#39;);    var btn2 = document.getElementById(&#39;btn2&#39;);
    btn1.onclick =  function (){
        test.scrollTop += 10;
    }
    btn2.onclick =  function (){
        test.scrollTop -= 10;
    }</script>复制代码

页面滚动

理论上，大部分的浏览器通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；safari浏览器是通过document.body.scrollTop和scrollLeft来控制的

    <p>
        内容<br>内容<br>
    </p>
    <script>

        // 页面滚动
        window.onscroll = function (){            console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft);            console.log(document.body.scrollTop,document.body.scrollLeft);

        }    </script>复制代码

所以，页面的滚动高度兼容写法是

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop复制代码

回到顶部

nbsp;html>
    
        <meta>
        <title></title>
    
    
        <button>回到顶部</button>
        <script>
            var backTop = document.getElementById(&#39;backTop&#39;);
            backTop.onclick = scrollTop;            function scrollTop(){                //兼容性写法
                if(document.documentElement.scrollTop || document.body.scrollTop){                    document.documentElement.scrollTop = document.body.scrollTop = 0;
                }
            }        </script>
    复制代码

滚动方法

scrollTo(x,y)

scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角

    <button>回到顶部</button>
    <script></script>
    <script>
        var backTop = document.getElementById(&#39;backTop&#39;);
        backTop.onclick = scrollTop;        function scrollTop(){
            scrollTo(0,0);
        }    </script>复制代码

相关免费学习推荐：javascript（视频）

以上是介紹JavaScript的offset、client、scroll家族屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：juejin。如有侵權，請聯絡admin@php.cn刪除

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。