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

資訊專欄INFORMATION COLUMN

js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

toddmark / 1414人閱讀

摘要：什么是，文檔對象模型。是萬維網聯盟的標準，定義了訪問和文檔的標準。在的標準中，是獨于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容結構和樣式。獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。

什么是DOM? 
DOM，文檔對象模型（Document Object Model）。DOM是 W3C（萬維網聯盟）的標準，DOM定義了訪問HTML和XML文檔的標準。在W3C的標準中，DOM是獨于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
W3C DOM由以下三部分組成： 
- 核心DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型

在一些DOM操作中我們經常會跟元素的位置打交道，鼠標交互式一個經常用到的方面，不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果。
現在咱們web開發使用原生操作dom節點都比較少，因為現在的框架都是屬于虛擬dom，原生操作dom節點我感覺很繁瑣
不知道的話自己下去搜搜

js dom 操作節點移動 方法介紹

js鼠標或坐標屬性

event.pageX/Y

event.offsetX/y

event.X/Y

event.clientX/Y

clientX/Y

clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變。

pageX/Y

pageX/Y獲取到的是觸發點相對文檔區域左上角距離，會隨著頁面滾動而改變

offsetX/Y

offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不同瀏覽器中有區別，其中在IE中以內容區左上角為基準點不包括邊框，如果觸發點在邊框上會返回負值，而chrome中以邊框左上角為基準點。

screenX/Y

screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。

圖解

函數獲取各種坐標方法

補充一下獲取dom的方法

通過ID獲取 document.getElementById(elementId)

通過name屬性 document.getElementsByName(elementName)

通過標簽名 document.getElementsByTagName

通過類名 document.getElementsByClassName

通過選擇器獲取一個元素document.querySelector("類名")

通過選擇器獲取一組元素document.querySelectorAll

獲取坐標


  
  


var dom = document.getElementById("move");
function down (e) {
    e = e || window.event;
  console.log(e.pageX, "pageX")
  console.log(e.offsetX, "offsetX")
  console.log(e.clientX, "clientX")
  console.log(e.screenX, "screenX")
  console.log(e.x, "e.x")
}
dom.onmousedown = down

見證奇跡的時刻到啦

讓div class 為 children 的dom節點左右移動
div（left/right）= div(clientX現在的)-（clientX原有的 - div（原來的left））
鏈接描述

讓div class 為 children 的dom節點上下活動，原理其實和往左移動一樣，這就不給圖了
鏈接描述

兩種代碼合起來就可以上下移動
鏈接描述

改變鼠標指針（自認為）

上指針 n-resize

左下針 sw-resize

左上針 nw-resize

鏈接描述

改變div盒子大小這里就給演示左右變化

向左改變大小

向右改變大小

鏈接描述

缺點 如果做其他圖行變化或是拖拽的話，比如菱形，不規則圖形等是非常的麻煩，因為css畫出的不規則圖形很繁瑣，不易變化
  如果用canvas主要的難點就是如果你畫很多的圖形，不好給定位用戶選擇的是哪個，而且canvas移動的話是需要重新繪制的，最最重要的一點
  是數學要比較好，比如勾股定理啊。。。不懂?。?！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97832.html

相關文章

  • screenX/Y，clientX/Y，offsetX/Y和pageX/Y之間有什么區別?

    摘要：意為偏移量，是被點擊的元素距左上角為參考原點的長度，而和的參考點有所差異。下，是包含邊框的，如圖所示。而是不包含邊框的，如果鼠標進入到區域，為返回負值，如圖所示。 offsetX,offsetY offset意為偏移量，是被點擊的元素距左上角為參考原點的長度，而IE、FF和Chrome的參考點有所差異。 Chrome下，offsetX offsetY是包含邊框的，如圖所示。showIm...

    jemygraw 評論0 收藏0

  • JS基礎篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標坐標詳解

    摘要：相對瀏覽器窗口簡單代碼即可實現，然而這是還不夠，因為絕大多數情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，的，屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。 在一些DOM操作中我們經常會跟元素的位置打交道，鼠標交互式一個經常用到的方面，令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果，這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結，沒特殊聲明代碼在IE8...

    phodal 評論0 收藏0

  • JavaScript操作DOM的那些坑

    摘要：在操作中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據實例整理那些大大小小的坑。在火狐中，與等效的是。對象的屬性則表示文檔的根節點。不區分和在下使用和時會同時返回或與給定值相同的元素。 js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據實例整理那些大大小小的坑。 DOM的工作模式是：先加載文檔的靜態內容、再以動態方式對它們進行刷新，...

    RiverLi 評論0 收藏0

  • 鼠標點擊的各種坐標 (事件對象)

    摘要：返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平垂直窗口坐標。可視區域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平（垂直）窗口坐標?？梢晠^域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...

    xushaojieaaa 評論0 收藏0

  • 鼠標點擊的各種坐標 (事件對象)

    摘要：返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平垂直窗口坐標。可視區域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平（垂直）窗口坐標?？梢晠^域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...

    xiongzenghui 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<