成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

toddmark / 1433人閱讀

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

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

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

js dom 操作節(jié)點移動 方法介紹

js鼠標或坐標屬性

event.pageX/Y

event.offsetX/y

event.X/Y

event.clientX/Y

clientX/Y

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

pageX/Y

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

offsetX/Y

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

screenX/Y

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

圖解

函數(shù)獲取各種坐標方法

補充一下獲取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節(jié)點左右移動
div（left/right）= div(clientX現(xiàn)在的)-（clientX原有的 - div（原來的left））
鏈接描述

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

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

改變鼠標指針（自認為）

上指針 n-resize

左下針 sw-resize

左上針 nw-resize

鏈接描述

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

向左改變大小

向右改變大小

鏈接描述

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97832.html

相關(guān)文章

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

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

    jemygraw 評論0 收藏0

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

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

    phodal 評論0 收藏0

  • JavaScript操作DOM的那些坑

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

    RiverLi 評論0 收藏0

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

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

    xushaojieaaa 評論0 收藏0

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

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

    xiongzenghui 評論0 收藏0

發(fā)表評論

0條評論

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