JavaScript網頁特效

• 1 元素偏移量offset系列
• • 1.1 offset概述
  • 1.2 offset與style的區別
• 2 元素可視區client系列
• 3 元素滾動scroll系列

1 元素偏移量offset系列

1.1 offset概述

offset含義：offset的含義是偏移量，使用offset的相關屬性可以動態地獲取該元素的位置、大小等。

屬性說明

offsetLeft	返回元素與帶有定位的父元素左邊框的偏移
offsetTop	返回元素與帶有定位的父元素上邊框的偏移
offsetWidth	返回自身的寬度（2*padding+2*border+content），注意返回數值不帶單位
offsetHeight	返回自身的高度（2*padding+2*border+content），注意返回數值不帶單位
offsetParent	返回作為該元素帶有定位元素的父級元素（如果父級都沒有定位則返回body）

示例：寫一個盒子，獲取并輸出鼠標指針在盒子內的坐標，下面是鼠標指針在盒子內的坐標位置示意圖分析。

具體代碼如下：

<div id="box"></div><style>#box {width: 200px;height: 200px;background-color: pink;}</style><script>// 獲取到該盒子var box = document.getElementById("box");// 給box綁定鼠標移動的事件box.addEventListener("mousemove", function (e) {// 獲取box相對于父元素的偏移量var left = box.offsetLeft;var top = box.offsetTop;// 計算鼠標在box中的坐標var x = e.pageX - left;var y = e.pageY - top;console.log("坐標是：(" + x + "," + y + ")");})</script>

【案例】點擊登錄后彈出可拖拽的模態框
【案例】實現放大鏡效果

1.2 offset與style的區別

offsetstyle

offset可以得到任意樣式表中的樣式值	style只能得到行內樣式表中的樣式值
offset系列獲得的數值是沒有單位的	style.width獲得的是帶有單位的字符串
offsetWidth包含padding、border、width的值	style.width獲得的是不包含padding、border的值
offsetWidth等屬性是只讀屬性，只能獲取不能賦值	style.width是可讀寫屬性，可以獲取也可以賦值

2 元素可視區client系列

client系列：client中文意思是客戶端，通過使用client系列的相關屬性可以獲取元素可視區的相關信息。

屬性說明

clientLeft	返回元素左邊框的大小
clientTop	返回元素上邊框的大小
clientWidth	返回width+2*padding的寬度，返回數值不帶單位
clientHeight	返回height+2*padding的寬度，返回數值不帶單位

示例：輸出元素上、左邊框的大小，以及自身的寬度和高度

<div></div><style>div {width: 100px;height: 100px;background-color: aqua;border: 3px solid yellow;}</style><script>//獲取div元素let div = document.querySelector("div");//輸出元素左邊框和上邊框的大小console.log("左邊框的大小：", div.clientLeft);console.log("上邊框的大小：", div.clientTop);//輸出元素自身寬度和高度（不含邊框）console.log("寬度為：", div.clientWidth);console.log("高度為：", div.clientHeight);</script>

3 元素滾動scroll系列

scroll含義：scroll的含義是滾動，使用scroll系列的相關屬性可以動態地獲取該元素的滾動距離、大小等。

屬性說明

scrollLeft	返回被卷去的左側距離，返回數值不帶單位
scrollTop	返回被卷去的上方距離，返回數值不帶單位
scrollWidth	返回自身的寬度，不含邊框。注意返回數值不帶單位
scrollHeight	返回自身的高度，不含邊框。注意返回數值不帶單位

示例：獲取自身的高度和寬度，獲取div卷起來的高度

<div>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</div><br><button>點擊獲取卷起來的高度和寬度</button><style>div {width: 200px;height: 100px;background-color: pink;/* 將放不下的元素滾動來顯示 */overflow: scroll;}</style><script>//1、獲取頁面中的元素div和buttonlet div = document.querySelector("div");let button = document.querySelector("button");//2、輸出自身的高度和寬度console.log("高度為：", div.scrollHeight);console.log("寬度為：", div.scrollWidth);//給按鈕注冊click點擊事件，點擊之后輸出卷起來的高和寬button.addEventListener("click", function () {console.log("卷起來的高度：", div.scrollTop);console.log("卷起來的寬度：", div.scrollLeft);})</script>

【案例】實現固定側邊欄效果

總結

以上是生活随笔為你收集整理的JavaScript网页特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。