scrollLeft scrollTop offse

scrollLeft scrollTop offsetLeft offsetTop 的區(qū)別

lt;!DOCTYPE HTML>

<head>

function req(){

var div=document.getElementById("div1");

document.getElementById("li1").innerHTML=(div.offsetTop)+"px";//div1距離屏幕頂部的距離

document.getElementById("li2").innerHTML=(div.offsetLeft)+"px";//div1距離屏幕左部的距離

document.getElementById("li3").innerHTML=(div.scrollTop)+"px";//div1縱向滾動條滾動的距離

document.getElementById("li4").innerHTML=(div.scrollLeft)+"px";//div1橫向滾動條滾動的距離

}

</script>

</head>

<div style="height:500px;width:400px">請調整橫豎滾動條后，點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

</div>

</div>

<ul style="list-style-type: none; line-height:30px;">結果：

<li>offsetTop : <span id="li1"></span></li>

<li>offsetLeft : <span id="li2"></span></li>

<li> scrollTop : <span id="li3"></span></li>

<li>scrollLeft : <span id="li4"></span></li>

</ul>

</div>

</body>

</html>

、偏移量offset

offset是偏移、位移、補償的意思（取整數值四舍五入），表示元素的偏移量。

offsetHeight和offsetWidth

元素盒子模型的寬高（width/height + padding+border）

offsetLeft和offsetTop

1、表示當前元素距離它最近的相對父級（定位元素）的水平或者垂直距離。
2、如果它一直沒有相對父級元素，默認指向body

offsetParent和parentNode

offsetParent 指的是最近的一個相對父級元素（默認指向body）
parentNode 就是直接父級（標簽結構中的父子關系）

html和css代碼

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        * {
             margin: 0;
             padding: 0;
             border: 0;
             list-style: none;
        }
 
         div {
             width: 300px;
             height: 300px;
             border: 1px solid #000;
             margin: 100px;
             position: relative;
        }
 
         span {
             width: 100px;
             height: 100px;
             border: 1px solid #000;
             position: absolute;
             left: 120px;
             top: 30px;
        }
     </style>
 </head>
 
 <body>
     <div>
         <span></span>
     </div>
 </body>
 
 </html>

JavaScript代碼

ebApi 思維導圖見文章底部

一、什么是webAPI?

web: 網頁
API: 接口一套別人封裝的屬性和方法
webAPI: 專門操作網頁的方法和屬性
萬物皆對象，在webAPI中把網頁中所有元素 <element> 都當成對象來處理

二、文檔樹

2.1 三個部分

文檔: document
元素: 網頁中的標簽
節(jié)點: 網頁中所有的內容都叫節(jié)點(包括標簽、屬性、文本、注釋)

2.2 節(jié)點的三個屬性

1. nodeType(節(jié)點類型)
2. nodeName(節(jié)點名字)
3. nodeValue(節(jié)點值)

2.2.1 元素節(jié)點

元素節(jié)點就是標簽節(jié)點

nodeType: 1
nodeName: 標簽名(大寫)
nodeValue: null

2.2.2 屬性節(jié)點

屬性包括屬性名和屬性值

nodeType: 2
nodeName: 屬性名
nodeValue: 屬性值

2.2.3 文本節(jié)點

nodeType: 3
nodeName: #text
nodeValue: 文本內容

2.2.4 注釋節(jié)點

nodeType: 8
nodeName: #comment
nodeValue: 注釋內容

三、window對象

window對象代表瀏覽器
window對象是JavaScript中的頂級對象
任何全局變量和全局函數聲明后在預解析的過程中都會自動保存為window對象里面的屬性和方法
window的兩個特殊屬性名不能再次聲明!!
name: name屬性名不管賦值任何值都會轉換為字符串 let name={}; -> [object Object]
top
window的兩個方法

window.open(href); /*打開一個網頁*/
window.close(); /*關閉網頁*/

四、事件

4.1 什么是事件?

在計算機中事件代表捕捉了用戶進行了什么操作再給對應的事件處理

4.2 事件三大部分

事件源事件類型事件處理函數

4.2.1 事件源

用戶操作的是什么元素事件中的this就是事件的事件源(誰觸發(fā)這個事件那this就是誰)

4.2.2 事件類型

用戶進行了什么操作

4.2.2.1 on

onmouseover 鼠標移入
onmouseout 鼠標移出
window.onload 當頁面加載完成后執(zhí)行
入口函數如果想將js代碼寫在html之前就可以用這個事件將js代碼寫在事件處理函數中
window.onunload 當頁面退出前執(zhí)行
可以保存用戶信息=> 用戶未保存信息直接退出網頁
onfocus 獲得焦點
文本框光標閃爍
onblur 失去焦點
onkeyup 鍵盤彈起
onkeydown 鍵盤按下
onscroll 滾動
當滾動頁面滾動條時觸發(fā)
onclick 點擊
onclick 和 onmousedown 區(qū)別
onclick 按下彈起才觸發(fā)
onmousedown 按下就會觸發(fā)

實現(xiàn)拖拽要考慮元素是否有margin 移動的x和y?減去元素原有的margin 給元素添加鼠標按下事件在按下事件里面給頁面添加鼠標移動事件給元素注冊鼠標彈起事件=> 清除頁面鼠標移動事件

onmousedown 鼠標按下
onmouseup 鼠標彈起
onmousemove 鼠標移動

H5拖拽需要為拖拽的元素添加 draggable="true" 屬性 拖拽元素添加

ondragstart 拖拽開始
ondrag 拖拽中
ondragend 拖拽結束
拖拽的目標元素添加
ondropenter 有元素拖進來觸發(fā)
ondropleave 有元素拖拽離開觸發(fā)
ondropover 主要是為了配合ondrop使用，一定要在ondropover事件里調用e.preventDefault()才能讓ondrop觸發(fā)
ondrop 有元素拖到我范圍內并松手才觸發(fā)

4.2.2.2 addEventListener()

三參數

/*
事件名 不加on
事件處理函數
boolean值 是否事件捕捉
*/
el.addEventListener()

ie8 不支持 addEventListener 兩參數

/*
事件名 加on
事件處理函數
*/
el.attachEvent()

4.2.2.3 on事件和addEventListener 添加事件的區(qū)別

元素.on事件=處理函數 (添加事件如果是同名事件，后面的事件處理函數會覆蓋前面的) 元素.addEventListener() (添加事件不會覆蓋之前的同名事件)

4.2.2.4 移除事件

用什么方式添加的事件就用什么方式移除事件

on=> null

el.onclick=function(){};
// 移除
el.onclick=null;

addEventListener=> removeEventListener
注意:如果addEventListener添加的事件的事件處理函數是匿名函數不能直接移除事件只能移除命名事件 (ie8的 attachEvent 一樣)

el.addEventListener("click",fn1)
// 移除
el.removeEventListener("click",fn1)

attachEvent=> detachEvent

el.attachEvent("onclick",f1)
// 移除
el.detachEvent("onclick",fn1)

4.2.3 事件處理函數

用戶操作后要執(zhí)行的什么代碼

4.2.3.1 事件對象 e

本質也是個對象
保存了事件觸發(fā)時的相關信息
在事件處理函數中的形參里寫參數 e
ie有兼容問題
兼容代碼e=e || window.event
三大坐標

screen e.screenX 和 e.screenY 獲取的是點擊的位置相對于屏幕左上角的坐標

page e.pageX,e.pageY 獲得的是點擊的位置相對于頁面（文檔）左上角的坐標有兼容性的問題,IE8不支持，自己計算 pageX=e.clientX + 頁面往左滾出去的距離 (scrollLeft) pageY=e.clientY + 頁面往上滾出去的距離 (scrollTop)

offset e.offsetX,e.offsetY 獲得是是點擊的位置相當于事件源的左上角的位置 ie屬性有bug offsetX=e.clientX - 盒子到可視區(qū)域的left (el.getBoundingClientRect.left) offsetY=e.clientY - 盒子到可視區(qū)域的top (el.getBoundingClientRect.top)

4.2.3.2 this、e.target、e.currentTarget區(qū)別

this 和 e.currentTarget 是一樣的當前調用的是誰的事件那么this就是誰 e.currentTarget ie8 不支持=> 直接用this

e.target 獲取事件源(目標階段) 正在觸發(fā)事件的那個元素 ie8不支持=> e.target 兼容代碼 var target=e.target || e.srcElement

4.3 事件的三大階段

4.3.1 如何獲取事件正在執(zhí)行的階段

在事件里可以通過 e.eventPhase 來捕獲當前是哪個階段捕獲=> 1 目標=> 2 冒泡=> 3

4.3.2 三大階段

捕獲目標冒泡

4.3.2.1 捕獲階段

一種現(xiàn)象與冒泡階段相反從window開始依次一級一級往下調用子元素的同名事件，直到找到真正觸發(fā)事件的事件源事件捕獲默認看不見想要看到捕獲階段則需要通過 addEventListener來綁定事件，并且第三個參數傳true

4.3.2.2 目標階段

找到真正觸發(fā)事件的那個元素 -> 事件源

4.3.2.3 冒泡階段

一種現(xiàn)象當元素事件觸發(fā)后會從事件源開始依次一次一次往上調用父元素的同名事件，直到window 事件冒泡默認存在

好處：給父元素添加事件相當于給子元素添加了事件 -> 事件委托 -> e.target 帶來的影響(壞處)：如果子元素和父元素有同名事件并且業(yè)務邏輯相反則會沖突影響

4.3.3 階段順序

設置捕獲

先捕獲從window開始依次一級一級調用子元素的同名事件 -> 找到目標(真正觸發(fā)事件的元素) -> 從目標元素開始依次一級一級調用父元素的同名事件直到window

未設置捕獲

找到目標(真正觸發(fā)事件的元素) -> 從目標元素開始依次一級一級調用父元素的同名事件直到window

4.3.4 阻止事件派發(fā)

阻止事件冒泡和阻止事件捕獲 e.stopPropagation() ie8魔鬼不支持(ie8只有事件冒泡，沒有事件捕獲)=> e.cancelBubble=true

五、本地存儲

只能存儲字符串查看本地存儲瀏覽器F12->Application->Local || Session Storage->fille://

5.1 localStorage 本地存儲

可以把數據存儲到本地(瀏覽器) 只要用戶不刪除則會一直保存每個域名都是獨立的保存數據不同域名不能互相訪問長久保存數據可以存儲到 localStorage

保存數據 localStorage.setItem(key,value)
獲取數據 localStorage.getItem(key)=> 如果沒有這個數據則返回 null
刪除一個數據 localStorage.removeItem(key)
清空所有數據 localStorage.clear()

5.2 sessionStorage 會話存儲

短暫存儲數據可以多頁面?zhèn)髦?相當于localStorage會更安全瀏覽器關閉后就不會保存了

保存數據 sessionStorage.setItem(key,value)
獲取數據 sessionStorage.getItem(key)=> 如果沒有這個數據則返回 null
刪除一個數據 sessionStorage.removeItem(key)
清空所有數據 sessionStorage.clear()

六、定時器和延時器

給元素添加動畫定時器可以將定時器id直接給元素元素.timeId

6.1 定時器

每隔一段時間執(zhí)行一段代碼

/*
參數一: 要執(zhí)行的代碼 可以寫字符串 在字符串里面寫js代碼 或者寫函數
參數二: 間隔事件 單位是毫秒 1000毫秒=1秒
*/
window.setInterval()

6.2 延時器

一段時間后執(zhí)行一段代碼

/*
參數一: 要執(zhí)行的代碼 可以寫字符串 在字符串里面寫js代碼 或者寫函數
參數二: 延遲事件 單位是毫秒 1000毫秒=1秒
*/
window.setTimeout()

6.3 清除定時器和延時器

clearInterval(定時器id)
clearTimeout(延時器id)

七、阻止a標簽默認跳轉三種方式

7.1 href

將a標簽的href的路徑改為 javascript：void(0) || javascript：void(null) || 簡寫 javascript：

7.2 return

給a標簽添加點擊事件在事件處理函數的最后 return false

7.3 事件對象 e

阻止事件默認行為 e.preventDefault()

return和事件對象e阻止跳轉的區(qū)別 return后面的代碼不執(zhí)行 e.preventDefault()不會影響后面代碼執(zhí)行

八、排他思想

先把大家恢復成默認，再讓自己特殊 tab切換

九、offset家族

只能獲取行內樣式

只能取值 (number) 不能賦值 offsetWidth 和 offsetHeight 獲取包括padding和border和width||height

9.1 offsetWidth

獲取盒子的最終寬度

9.2 offsetHeight

獲取盒子的最終高度

9.3 offsetTop

獲取自身上外邊框到定位父級上內邊框的距離

9.4 offsetLeft

獲取自身左外邊框到定位父級左內邊框的距離

十、scroll家族

scrollWidth 和 scrollHeight 獲取的包括了隱藏的部分只能獲取(number)不能修改 scrollLeft 和 scrollTop 可以獲取也可以修改想要滾動條滾動到最右變直接賦值為 scrollWidth即可

10.1 scrollWidth

獲取盒子內容的總寬度

10.2 scrollHeight

獲取盒子內容的總高度

10.3 scrollTop

獲取內容上邊滾出去的距離

10.4 scrollLeft

獲取內容左邊滾出去的距離

scrollTop和scrollLeft有兼容問題兼容代碼

var scrollTop=window.pageYOffset 
|| document.documentElement.scrollTop 
|| document.body.scrollTop 
|| 0;

var scrollLeft=window.pageXOffset 
|| document.documentElement.scrollLeft 
|| document.body.scrollLeft 
|| 0;

十一、client家族

如果元素有滾動條那么這個元素的可視寬度就是整個盒子的寬度 - 滾動條的寬度

11.1 clientWidth

獲取可視區(qū)域的寬

11.2 clientHeight

獲取可視區(qū)域的高

11.3 clientTop

獲取左邊框的寬度

11.4 clientLeft

獲取上邊看的寬度

十二、操作元素的方式

12.1 通過id獲取元素

如果沒有這個元素則返回null 有則返回一個對象

獲取 id 只能通過document來獲取

document.getElementById("id")

12.2 樣式名獲取元素

如果沒有這個元素則返回一個空集合[偽數組] document.getElementsByClassName('class')

12.2.1 什么是偽數組?

有下標索引、有元素、有長度但是沒有數組中的方法

12.3 通過標簽名來獲取元素

ie8魔鬼有兼容問題 document.getElementsByTagName("div")

12.4 通過name屬性來獲取元素(表單元素)

document.getElementsByName("name")

12.5 通過css選擇器來獲取元素 (h5新增)

獲取的是一個對象如果匹配到多個元素則返回第一個元素
document.querySelector(selectors)
獲取的是一個偽數組
document.querySelectorAll(selectors)

12.6 獲取文檔

document

12.7 獲取html

document.documentElement

12.8 獲取head

document.head

12.9 獲取body

document.body

12.10 獲取子節(jié)點和子元素

子節(jié)點
el.childNodes
子元素
el.childNodes

12.11 獲取父節(jié)點和父元素

區(qū)別

el.parentNode可以獲取到document el.parentElement不能獲取到document 因為document不是一個元素

父節(jié)點
el.parentNode
父元素
el.parentNode

12.12 獲取上一個兄弟節(jié)點和上一個兄弟元素

找到上一個兄弟節(jié)點(文本、注釋、標簽)，所有瀏覽器都支持
el.previousSibling
找到上一個兄弟元素(只會找到元素)，IE9以下都不支持
el.previousElementSibling

12.13 獲取下一個兄弟節(jié)點和下一個兄弟元素

找到下一個兄弟節(jié)點(文本、注釋、標簽)，所有瀏覽器都支持
el.nextSibling
找到下一個兄弟元素(只會找到元素)，IE9以下都不支持
el.nextElementSibling

12.14 添加子元素

父元素.appendChild("子元素")

12.15 刪除子元素

父元素.removeChild("子元素")

12.16 在某個子元素前面插入元素

父元素.insertBefore(插入的新元素,要在哪個元素前面插入)

12.17 替換子元素

父元素.replaceChild(新的元素,被替換的元素)

十三、操作屬性的另二種方式

13.1 js 操作屬性

既可以操作自帶屬性，也可以操作自定義屬性

獲取屬性
el.getAttribute("屬性名")
修改屬性
el.setAttribute("屬性名","屬性值")
刪除屬性
el.removeAttribute("屬性名")

13.2 h5 操作屬性

在自定義屬性前面加 data- 如果自定義屬性前面添加了 data- 那么這些自定義屬性都會保存到el.dataset '對象' 里面想要取得屬性直接遍歷對象即可取值時 data-會被去掉并且如果后面還有- 會把后面的-也去掉并把-后面的首字母大寫(駝峰命名法)

獲得屬性
el.dataset["shengao"]
e.dataset.shengao
修改屬性
el.dataset["shengao"]="123cm"
刪除屬性
delete el.dataset["shengao"]

十四、創(chuàng)建元素的三種方式

document.write()

只能在body添加元素，并且會覆蓋之前頁面中的元素

document.createElement()

創(chuàng)建一個標簽存在內存里面再通過父元素.appendChild(“創(chuàng)建出來的元素”) 渲染到頁面 appendChild細節(jié) 給父元素追加一個元素，添加在最后，如果此元素已經存在，則被移動到最后

el.innerHtml()

為某元素添加內容，會覆蓋原來的內容 +=就只會追加不會覆蓋每次innerHtml賦值(+=)都是重新渲染，所以有可能會讓之前的元素丟失，還會讓之前元素的事件丟失(事件委托可解決) 渲染耗性能，大量資源浪費先拼接字符串再循環(huán)完了后一次性追加到頁面中

十五、修改元素的屬性

15.1 操作元素樣式中的屬性

獲取
元素.style.樣式名
修改
元素.style.樣式名=樣式值
注意

樣式名如果在css 有 "-" 的應使用駝峰命名法 background-color=> backgroundColor

15.2 操作圖片的路徑

獲取
元素.scr
修改
元素.scr="路徑"

15.3 操作單標簽按鈕的文字

獲取
元素.value
修改
元素.value="值"

15.4 操作元素的類名

15.4.1 JavaScript

獲取
元素.className
添加
元素.className +=" class"
注意用+=得加空格

15.4.2 HTML5

el.classList 返回的是一個偽數組保存的是元素上的所有類名

添加一個類
el.classList.add("class")
刪除一個類
el.classList.remove("class")
修改一個類
el.classList.replace("被替換的類","要替換的新類")
切換一個類
el.classList.toggle("class")
沒有就添加這個類有就刪除這個類
判斷一個類是否存在
el.classList.contains("class")
存在返回true 不存在返回false

15.5 操作元素顯示or隱藏

顯示
元素.style.displaye="block"
隱藏
元素.style.displaye="none"
如果想要通過一個按鈕切換顯示隱藏可以聲明一個flag 記錄顯示和隱藏的狀態(tài)

let flag=this.value=="隱藏" ? true : false divBox.style.display=flag ? "none" : "block" this.value=flag ? "顯示" : "隱藏" // 這里用來下一次點擊再次toggle 所以需要與設置的flag相反設定對應的值

15.6 表單元素的禁用和啟動

el.style.disabled=true

加上代表禁用不加上代表啟動 js里面設置它為 true 代表禁用、false 代表啟用

15.7 操作雙標簽的文字

獲取
元素.innerText
修改
元素.innerText="值"

十六、innerHTML、innerText、textContent的區(qū)別

innerHTML沒有兼容問題既可以拿到文本也可以渲染標簽

innerText和textContent都是設置標簽里面的文本內容將數據當成字符串輸出到頁面不會渲染 innerText在老版火狐里面不支持 textContent在ie9以下都不支持

十七、表單元素屬性

value
可以獲取大部分表單元素的內容(option除外)
type
可以獲取表單元素的類型
disabled
禁用屬性
checked
復選框選中
selected
下拉框選中

十八、獲取元素的最終樣式

window.getComputedStyle(element)["width"]
window.getComputedStyle(element).width

返回的string屬性值 "100px"

/*ie8魔鬼專用*/
element.currentStyle['width']

十九、獲取元素到可視區(qū)域的距離

element.getBoundingClientRect()
element.getBoundingClientRect().left
element.getBoundingClientRect().top

獲取鼠標位置相對于自身的x和y (offsetX和offsetY有bug) e.clientX - 盒子到可視區(qū)域的left e.clientY - 盒子到可視區(qū)域的top

XMind思維導圖

總結

若有感興趣的小伙伴，需要WebAPI思維導圖原圖的，關注我，私信回復獲取：WebAPI思維導圖原圖

作者：藍海00
轉載鏈接：https://www.jianshu.com/p/d3b815c8d914

在線咨詢

上一篇：只需幾步完成水印的批量添加操作
下一篇：HTML有2種路徑的寫法：絕對路徑和相對路徑

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

scrollLeft scrollTop offse

一、什么是webAPI?

二、文檔樹

2.1 三個部分

2.2 節(jié)點的三個屬性

2.2.1 元素節(jié)點

2.2.2 屬性節(jié)點

2.2.3 文本節(jié)點

2.2.4 注釋節(jié)點

三、window對象

四、事件

4.1 什么是事件?

4.2 事件三大部分

4.2.1 事件源

4.2.2 事件類型

4.2.2.1 on

4.2.2.2 addEventListener()

4.2.2.3 on事件和addEventListener 添加事件的區(qū)別

4.2.2.4 移除事件

4.2.3 事件處理函數

4.2.3.1 事件對象 e

4.2.3.2 this、e.target、e.currentTarget區(qū)別

4.3 事件的三大階段

4.3.1 如何獲取事件正在執(zhí)行的階段

4.3.2 三大階段

4.3.2.1 捕獲階段

4.3.2.2 目標階段

4.3.2.3 冒泡階段

4.3.3 階段順序

4.3.4 阻止事件派發(fā)

五、本地存儲

5.1 localStorage 本地存儲

5.2 sessionStorage 會話存儲

六、定時器和延時器

6.1 定時器

6.2 延時器

6.3 清除定時器和延時器

七、阻止a標簽默認跳轉三種方式

7.1 href

7.2 return

7.3 事件對象 e

八、排他思想

九、offset家族

9.1 offsetWidth

9.2 offsetHeight

9.3 offsetTop

9.4 offsetLeft

十、scroll家族

10.1 scrollWidth

10.2 scrollHeight

10.3 scrollTop

10.4 scrollLeft

十一、client家族

11.1 clientWidth

11.2 clientHeight

11.3 clientTop

11.4 clientLeft

十二、操作元素的方式

12.1 通過id獲取元素

12.2 樣式名獲取元素

12.2.1 什么是偽數組?

12.3 通過標簽名來獲取元素

12.4 通過name屬性來獲取元素(表單元素)

12.5 通過css選擇器來獲取元素 (h5新增)

12.6 獲取文檔

12.7 獲取html

12.8 獲取head

12.9 獲取body

12.10 獲取子節(jié)點和子元素

12.11 獲取父節(jié)點和父元素

12.12 獲取上一個兄弟節(jié)點和上一個兄弟元素

12.13 獲取下一個兄弟節(jié)點和下一個兄弟元素

12.14 添加子元素

12.15 刪除子元素

12.16 在某個子元素前面插入元素

12.17 替換子元素

十三、操作屬性的另二種方式

13.1 js 操作屬性

13.2 h5 操作屬性