资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

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

toddmark / 1413人阅读

摘要：什么是，文档对象模型。是万维网联盟的标准，定义了访问和文档的标准。在的标准中，是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容结构和样式。获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

什么是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移动的话是需要重新绘制的，最最重要的一点
  是数学要比较好，比如勾股定理啊。。。不懂！！！
GPU云服务器 云服务器 js操作dom对象 js中操作dom节点 Dom操作 dom对象操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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条评论

toddmark

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<