整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          scrollLeft scrollTop offse

          scrollLeft scrollTop offsetLeft offsetTop 的區(qū)別

          lt;!DOCTYPE HTML>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          <script type="text/javascript">

          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>

          <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">

          <div style="width:60%;border-right:1px dashed red;float:left;">

          <div style="float:left;">

          <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

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

          </div>

          <input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>

          </div>

          </div>

          <div style="width:30%;float:left;">

          <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>

          <div style="clear:both;"></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é)點

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

          2.2.2 屬性節(jié)點

          屬性包括屬性名和屬性值

          1. nodeType: 2
          2. nodeName: 屬性名
          3. nodeValue: 屬性值

          2.2.3 文本節(jié)點

          1. nodeType: 3
          2. nodeName: #text
          3. nodeValue: 文本內容

          2.2.4 注釋節(jié)點

          1. nodeType: 8
          2. nodeName: #comment
          3. 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


          主站蜘蛛池模板: 亚洲日韩国产一区二区三区| 一区二区三区免费视频观看| 色噜噜狠狠一区二区| 视频一区二区三区人妻系列| 精品在线一区二区| 日本一区二区三区在线视频观看免费 | 亚洲一区中文字幕在线电影网| 无码少妇一区二区三区浪潮AV| 亚洲熟妇av一区| 日韩在线视频一区二区三区 | 国产一区二区精品久久凹凸 | 亚洲狠狠狠一区二区三区| 欧美激情一区二区三区成人| 全国精品一区二区在线观看| 亚洲av无码一区二区三区不卡| bt7086福利一区国产| 一区二区日韩国产精品| 日本免费一区二区三区四区五六区| 欧美亚洲精品一区二区| 久久久99精品一区二区| 国产99久久精品一区二区| 人妻无码一区二区视频| 国产美女一区二区三区| 久久免费视频一区| 亚洲乱码一区二区三区国产精品 | 中文字幕乱码人妻一区二区三区| 日韩精品一区二区午夜成人版| 无码人妻精品一区二区三区66 | 奇米精品一区二区三区在线观看| 亚洲日韩一区二区一无码| 国产一区二区三区在线视頻| 无码人妻aⅴ一区二区三区有奶水| 视频一区精品自拍| 国产精品熟女视频一区二区| 91在线视频一区| 久久综合精品国产一区二区三区| 在线观看视频一区二区| 亚洲福利秒拍一区二区| 中文字幕AV一区中文字幕天堂| 日本一区二区三区四区视频| 久久精品免费一区二区|