javascript 节点获取坐标(相对于屏幕页面...)

javascript 节点获取坐标(相对于屏幕页面...),第1张

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

eventclientX 相对文档的水平座标

eventclientY 相对文档的垂直座标

eventoffsetX 相对容器的水平坐标

eventoffsetY 相对容器的垂直坐标

documentdocumentElementscrollTop

有资料可以查看。。。

首先要让DIV启用编辑模式

<div contenteditable=true id="divTest"></div>

通过设定contenteditable=true开启div的编辑模式这样DIV就可以跟文本框一样输入内容了。

不扯话题了。下面说怎么获取或设置光标位置

2个步骤

1:获取DIV中的光标位置

2:改变光标位置

var cursor = 0; // 光标位置

documentonselectionchange = function () {

var range = documentselectioncreateRange();

var srcele = rangeparentElement();//获取到当前元素

var copy = documentbodycreateTextRange();

copymoveToElementText(srcele);

for (cursor = 0; copycompareEndPoints("StartToStart", range) < 0; cursor++) {

copymoveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量

}

}

给document绑定光标变化事件。用来记录光标位置

这样就可以拿到DIV的光标位置了

可以分成两步

Step1

找出div中的所有标签

(s)<div[^>]+>(+)</div>(-s)

其中分组1为div标签中内容

step2

在Step1中找出的内容中,查找a标签

(s)<a[^>]+href="([^"]+)"[^>]>([^<]+)</a>(s)

其中分组1为超链接的地址,分组2为超链接显示的内容

在 JS获取div高度的方法 中,整理了几个有关于获取div高度的方法,后来又遇到一个问题,怎么获取DIV在页面中的绝对位置,因此在这篇笔记中记录一下。

页面结构

样式

getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。

offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置,整型,单位像素。

借用这个思路,当我们想获取元素的绝对位置时,可以递归遍历,直到元素的父元素为body为止。

关于offsetParent属性,有以下几点Tips。

以上就是关于javascript 节点获取坐标(相对于屏幕\页面\...)全部的内容,包括:javascript 节点获取坐标(相对于屏幕\页面\...)、如何获取可编辑div或body里光标的像素位置、在java中用正则表达式获取div标签中的a标签的值和href等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10132569.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存