div事先在输入框的下面的而且是隐藏的，当点击表情图标，div通过onclick激活JS某个函数，该函数内必须会有一段使隐藏的div显示出来的方法语句，是通过这样个流程实现的。
怎样去定位这个表情DIV的位置的，这个css里面有一个叫position的方法，利用坐标x,y实现div位置任意改变。
把div设置成相对定位或绝对定位，总之是让其拥有left,top值，当鼠标移进div的时候获取鼠标的坐标，用鼠标的left减去div的left值就是鼠标在div里面的left值，即鼠标在div中的x坐标，
同理，用鼠标的top值减去div的top值就是鼠标在div里面的top值，即鼠标在div中的y坐标。
获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较
在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法
一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element) {
var actualLeft = element offsetLeft
actualTop = element offsetTop
current = element offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while (current !== null) {
actualLeft += current offsetLeft;
actualTop += current offsetTop;
current = current offsetParent;
}
// 返回包含left top坐标的对象
return {
left: actualLeft
top: actualTop
};
}
例子截图
firebug下测试结果截图 (注 其他浏览器已通过测试!)
二 通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document
rec = element getBoundingClientRect()
_x = rec left // 获取元素相对浏览器视窗window的左 上坐标
_y = rec top;
// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc documentElement scrollLeft || dc body scrollLeft;
_y += dc documentElement scrollTop || dc body scrollTop;
return {
left: _x
top: _y
};
}
经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异
注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
lishixinzhi/Article/program/Java/JSP/201311/20207
<title>Js获取适时获取鼠标坐标值并显示</title>
<script type="text/javascript">
var getCoordInDocumentExample = function(){
var coords = documentgetElementById("coords");
coordsonmousemove = function(e){
var pointer = getCoordInDocument(e);
var coord = documentgetElementById("coord");
coordinnerHTML = "X,Y=("+pointerx+", "+pointery+")";
}
}
var getCoordInDocument = function(e) {
e = e || windowevent;
var x = epageX || (eclientX +
(documentdocumentElementscrollLeft
|| documentbodyscrollLeft));
var y= epageY || (eclientY +
(documentdocumentElementscrollTop
|| documentbodyscrollTop));
return {'x':x,'y':y};
}
windowonload = function(){
getCoordInDocumentExample();
};
</script>
<div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" style="width:500px;border:2px solid #336699;"> </div>
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap;
-webkit-tap-highlight-color: transparent;
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;
filter: brightness(100); 变白
第二行变第一行不变
body{}
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有d性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可
-webkit-overflow-scrolling: touch;
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4 手指滑动时，三个值都会发生变化
5 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用epreventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
epreventDefault()
}
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
首先你要先搞清你所说的坐标变化不大是相对窗口，屏幕，还是文档的，他们的坐标系是不同的。不知你想要找的是哪一个。
1相对窗口，当然是以浏览器窗口为主了，即浏览器中可见部分（即包含文档部分）的左上角为坐标原点。这是用clientX和clientY获取的。
2相对屏幕，当然是以你的显示器为主了，显示器的左上角为原点，用screenX和screenY可以获取到
3相对文档的，即以文档BODY所显示的左上角为原点，例如当一个DIV的position="absolute"时设left="100px"
top="100px"那么无论你如何变换浏览器，虽然它显示的位置在变但他在文档中的位置是不变的。一般用documentbodyscrollLeft+eventclientX和documentbodyscrollTop+eventclientY来获取
而offsetX解释说是事件产生的位置和鼠标位置的偏移量，没太理解，我也是初学。
而你说改变分辨率坐标改变，这是必然的。因为在不同的分辨率下网页的显示样式不同，这不是坐标改变的主要原因，主要还是因为度量的改变，如：无论屏幕的分辨率怎么改屏幕大小是不变的，但它代表的显示逻辑长度改变了，如1024×768和800×600，同样宽度的屏幕被当成1024个长度单位来用和当成800个长度单位来用当然会不同，当你点击屏幕的中央时前者返回的是1024/2而后者返回的是800/2所以坐标值会改变。就像你用米尺量是1米，用寸尺量是3寸，一个是1，一个是3一样的道理。
1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。
2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。
3、得到的结果是一个数组对象，只要获取里面的top数据就行了。
4、使用log方法，把数据输出到浏览器的控制台。
5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。
6、然后看一下控制台上的数据，得到距离为439的像素。
以上就是关于如何用JS 获取DIV的坐标位置全部的内容，包括:如何用JS 获取DIV的坐标位置、js获取元素到文档区域document的坐标方法、求代码，手机获取屏显(x,y)处的颜色。js或lua的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）