国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯 + 補(bǔ)充]理解 DOM 座標(biāo)

Lionad-Morotar / 1373人閱讀

摘要：相對(duì)於座標(biāo)在可視區(qū)的最左上角。滑鼠座標(biāo)通常透過事件取得。再次強(qiáng)調(diào)不幸的是沒有屬性可以直接取得元素對(duì)應(yīng)的座標(biāo)。觸發(fā)事件的元素相對(duì)於父容器定位元素的座標(biāo)，從開始計(jì)算。上個(gè)座標(biāo)與當(dāng)前的座標(biāo)移動(dòng)距離。

座標(biāo)系統(tǒng)

在瀏覽器中有兩種座標(biāo)系統(tǒng) & 滑鼠座標(biāo)：

1. 相對(duì)於 `document` - 座標(biāo) (0, 0) 在整個(gè)頁面的最左上角。
2. 相對(duì)於 `window` - 座標(biāo) (0, 0) 在可視區(qū) Viewport 的最左上角。
3. 滑鼠座標(biāo) - 通常透過事件取得。

當(dāng)頁面還沒捲動(dòng)時(shí) window 和 document 的原點(diǎn) (0, 0) 與其他座標(biāo)是相同的。

開始捲動(dòng)後，document 的座標(biāo)等於 window（viewport） 的座標(biāo)加上 scroll 的位置，大部分的情況下我們會(huì)使用 document 座標(biāo)系統(tǒng)，因?yàn)樗幢?scroll 了，還是會(huì)保持一致。

元素座標(biāo)與 offsetParent

一個(gè)元素的座標(biāo)位於該元素的左上角，不幸的是沒有屬性可以直接取得元素對(duì)應(yīng) document 的座標(biāo)。不過可以透過計(jì)算 offsetTop/offsetLeft 和 offsetParent 來取得。

offsetParent 為元素的一個(gè)唯讀屬性，其值為上層最接近的有設(shè)定 position 的容器元素。更精確的說是 position 不為 static 的元素。當(dāng)沒有任何 positioned 的元素時(shí)最接近的 table cell 或根元素為 offsetParent。HTML 兼容模式 body 為 offsetParent。display: none 時(shí) offsetParent 為 null。

一個(gè)簡(jiǎn)單的計(jì)算方式就是遍歷所有 offsetParent 計(jì)算 offsetTop/offsetLeft。簡(jiǎn)單說就是不斷累加自己在父元素（positioned）的座標(biāo)/距離，最終到達(dá) document 則完成計(jì)算。

function getOffset (el) {
  var top = 0, left = 0
  while (el) {
    top += parentInt(el.offsetTop)
    left += parentInt(el.offsetLeft)
    el = el.offsetParent
  }

  return {
    top: top,
    left: left
  }
}

這種方式有 2 個(gè)缺點(diǎn)：

不同瀏覽器行為可能不同。因?yàn)?border 和 scroll 是否加入計(jì)算造成差異。

慢！因?yàn)橐闅v所有 offsetParent。

正確的方式 el.getBoundingClientRect()

這個(gè)方法時(shí) w3c 標(biāo)準(zhǔn)，並且?guī)缀跛行掳娴臑g覽器都支援。它會(huì)回傳封閉該元素的一個(gè)矩形(CSS border-boxes)，而這個(gè)矩形會(huì)透過物件的形式包含 top, left, right, bottom 等資料傳回。

再次強(qiáng)調(diào) - 不幸的是沒有屬性可以直接取得元素對(duì)應(yīng) document 的座標(biāo)。這個(gè) getBoundingClientRect() 取得的資訊是相對(duì)於 window 不是 document。

根據(jù) CSS 規(guī)範(fàn)，任何內(nèi)容都會(huì)被放置在 CSS Box 中。像是 div 這類的 Box 又稱 block box，這類的 Box 原本就是一個(gè)矩形。如果元素是 inline 的話會(huì)牽扯到 inline box，line box，containing box，contain area。就會(huì)有多個(gè)的矩形來組織。又稱 anonymous block box

/line-box.jpg

使用 getBoundingClientRect()

function getOffset (el) {
  // (1)
  var box = el.getBoundingClientRect()
  var body = document.body
  var docEl = document.documentElement

  // (2)
  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
  var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft

  // (3)
  var clientTop = docEl.clientTop || body.clientTop || 0
  var clientLeft = docEl.clientLeft || body.clientLeft || 0

  // (4)
  var top = box.top + scrollTop - clientTop
  var left = box.top + scrollLeft - clientLeft

  return {
    top: Math.round(top),
    left: Math.round(left)
  }
}

取得矩形與元素等相關(guān)座標(biāo)資訊

計(jì)算 page scroll。所有瀏覽器器除了 IE < 9 外都支援 pageXOffset/pageYOffset。在 IE 當(dāng)宣告了 DTD i.e DOCYPTE 則 scroll 位置可以透過 documentElement（）取得，否則就從 body 取。

在 IE < 8 document 或 body 會(huì)具有特殊的偏移，所以我們需要取得偏移並扣掉。但要注意的是 clientTop/clientLeft 同時(shí)也表示 border 寬，一般來說我們不會(huì)替 document 或 body 設(shè)定 border，在這種情況下 IE 的document.documentElement.clientTop 不是 0 而是 2px。因此我們要減掉。

加入捲動(dòng)的距離，然後扣掉位移即是該元素相對(duì)於 document 的座標(biāo)。

針對(duì) Firefox 我們需要而外使用四捨五入 Math.round()

scrollTop

取得已經(jīng)捲動(dòng)多少距離

document.body.scrollTop（Undefined DTD，兼容所有瀏覽器）

document.documentElement.scrollTop（DTD， Chrome, Safari 為 0）

window.pageYOffset（FF，Chrome，IE9+，Opera）

window.scrollY（不推薦使用）

DTD

DTD（Document Type Definition）文件類型定義，定義 XML 的元素，結(jié)構(gòu)，屬性。
使用 DTD 可以讓不同的使用者在交換資料時(shí)明白其資料格式的標(biāo)準(zhǔn)，而程式可以使用 DTD 來驗(yàn)證 XML 是否正確。

在 HTML 中 document.compatMode 可以得知是否宣告了 DTD，值為 BackCompat 為未宣告，CSS1Compat 為宣告 DTD。

MouseEvent 座標(biāo)

screenX/Y - 相對(duì)於螢?zāi)蛔笊辖堑淖鶚?biāo)

pageX/Y - 相對(duì)於頁面左上角的座標(biāo)（IE9 不支援）包含 scroll

clientX/Y - 相對(duì)於瀏覽器左上角的座標(biāo)

layerX/Y - 當(dāng)元素的 position 不是 static 我們稱為定位元素（positioned）。觸發(fā)事件的元素相對(duì)於父容器定位元素的座標(biāo)，從 border 開始計(jì)算。

offsetX/Y - 跟 layerX/Y 不同的是 layerX/Y 是從 border 外邊界開始計(jì)算，offsetX/Y 從內(nèi)邊界計(jì)算 i.e padding area，也就是說當(dāng)點(diǎn)擊在 border 上時(shí)會(huì)是負(fù)值。

movementX/Y - 上個(gè) mousemove 座標(biāo)與當(dāng)前的 mousemove 座標(biāo)移動(dòng)距離。currentEvent.screenX - previousEvent.screenX

window 尺寸

window.innerWidth

window.innerHeight

window.outerWidth

window.outerHeight

window.pageYOffset

window.pageXOffset

window.scrollX

window.scrollY

window.screenX

window.screenY

DOM 尺寸

clientWidth / clientHeight

scrollWidth / scrollHeight

offsetWidth / offsetHeight

scrollTop / scrollLeft

offsetTop / offsetLeft

clientTop / clientLeft

offsetParent

getBoundingClientRect()

video.videoWidth

video.videoHeight

小結(jié)

client 前綴的概略為相對(duì)於瀏覽器 viewport 或指內(nèi)部 padding area。
offset 前綴的概略為相對(duì)於父定位元素。
scroll 前綴的概略為相對(duì)於完整頁面。
screen 相對(duì)於螢?zāi)弧?/p> 資源

Javascript coordinates

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88121.html

相關(guān)文章

  • [譯] 學(xué)習(xí) CSS clip-path 屬性

    摘要：整體來說網(wǎng)頁主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。即便我們?cè)O(shè)定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達(dá)成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。 整體來說網(wǎng)頁主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。造成這樣差異的原因有很多，不過其中一個(gè)即是缺少合適的工具。 這篇文章主要會(huì)介紹 clip-path 這...

    yuanxin 評(píng)論0 收藏0

  • [技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

    摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放（zoom）和拖曳（drag）效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...

    Leo_chen 評(píng)論0 收藏0

  • [技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

    摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放（zoom）和拖曳（drag）效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...

    AJie 評(píng)論0 收藏0

  • [譯 + 補(bǔ)充] Webpack 2 入門

    摘要：目錄許多開發(fā)者會(huì)把的目錄命名為但這並不強(qiáng)迫。所有的檔案都會(huì)使用從被編譯成。同時(shí)有個(gè)小小的重點(diǎn)那就是我們可已觀察編譯後的檔案大小。在專案目錄下執(zhí)行可以觀察截至目前為止的結(jié)果。我們的目標(biāo)是要把編譯封裝到我們的中。 在今時(shí)今日，webpack 已經(jīng)成為前端開發(fā)非常重要的工具之一。本質(zhì)上它是一個(gè) Javascript 模組封裝工具，但透過 loaders 和 plugins 它也可以轉(zhuǎn)換封裝其...

    betacat 評(píng)論0 收藏0

  • [譯 + 更新] 參透 Node 中 exports 的 7 種設(shè)計(jì)模式

    摘要：現(xiàn)在，我們可以開始探討介面的設(shè)計(jì)模式了。匯出命名空間一個(gè)簡(jiǎn)單且常用的設(shè)計(jì)模式就是匯出一個(gè)包含數(shù)個(gè)屬性的物件，這些屬性具體的內(nèi)容主要是函式，但並不限於函式。如此，我們就能夠透過匯入該模組來取得這個(gè)命名空間下一系列相關(guān)的功能。 前言 這篇文章試著要整理，翻譯Export This: Interface Design Patterns for Node.js Modules這篇非常值得一讀的...

    wmui 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<