我试图将页面移动到一个<div>元素.
我试过下一个代码无济于事:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Run Code Online (Sandbox Code Playgroud) 我想在Javascript中获得一个对象在页面上的绝对x,y位置.我怎样才能做到这一点?
我试过obj.offsetTop和obj.offsetLeft,但这些只给相对于父元素的位置.我想我可以循环并添加父级的偏移量及其父级的偏移量,依此类推,直到我找到没有父级的对象,但似乎应该有更好的方法.谷歌搜索没有太多,甚至SO网站搜索没有找到任何东西.
另外,我不能使用jQuery.
我想制作一个可拖动的(也就是说,可以通过鼠标重新定位)React组件,它似乎必然涉及全局状态和分散的事件处理程序.我可以用脏的方式,在我的JS文件中使用全局变量,甚至可以将它包装在一个漂亮的闭包界面中,但我想知道是否有一种方法可以更好地与React相结合.
此外,由于我之前从未在原始JavaScript中完成此操作,因此我想看看专家是如何做到这一点的,以确保我已经处理了所有角落案例,特别是与React相关的案例.
谢谢.
我想要一个元素的Y坐标和Y值= 0之间的确切距离,我认为它是文档的顶部.
myElement.getBoundingClientRect().top;
Run Code Online (Sandbox Code Playgroud)
但是getBoundingClientRect()的值似乎在滚动时发生了变化.如何获得myElement和Y坐标= 0(文档顶部)之间的实际距离?
我有一个热图应用程序和存储我存储点击的x,y坐标以及视口宽度和高度.2次点击的真实数据:
x, y, width, height
433, 343, 1257, 959
331, 823, 1257, 959
Run Code Online (Sandbox Code Playgroud)
问题是当我在响应式网站上调整屏幕大小时,显示的点击现在全部关闭.我的搜索结果是空的,但有一个公式或算法可以重新计算不同分辨率的x和y坐标.例如,第一次点击,如果width从去1257到990和height从云959到400,如何重新计算我的X和Y,使他们在同一地点排队?
编辑:我在数据库中添加了2个字段,width_percentage和height百分比来存储x宽度的y百分比和高度的百分比.因此,如果x是433并且屏幕的宽度是1257,那么x距离屏幕的左边缘是35%.然后我对高度使用相同的理论并运行计算,但它没有将点击点缩放到与我相同的位置,尽管百分比将用于缩放分辨率.我通过点击全分辨率1257宽度然后以900宽度重新打开来测试它.请参阅下面的代码以显示较低分辨率的点击点.
Ajax PHP
while ($row = mysql_fetch_array($results)) {
if( $_GET['w'] < $row['width'] ) {
$xcorr = $row['width_percentage'] * $_GET['w'];
$ycorr = $row['y'];
}
}
Run Code Online (Sandbox Code Playgroud)
这使用$_GET变量,在页面加载时传递屏幕分辨率的宽度和高度.然后它从数据库中获取点击点$results.由于我只将分辨率宽度从1257缩放到900,因此我没有计算高度和与初始点击相同的像素.新宽度I乘以百分比,并设置屏幕左侧百分比边距的点.由于百分比为35%,新的x坐标变为900 *.35 = 315px左边缘.它无法正常工作,我仍然摸不着头脑,为响应式网站点击同一位置.
如果我有一个元素,例如:
<p>Lorem ipsum dolor sit amet, ante risus massa adipiscing quisque quis. At mauris tellus in, sed vehicula integer fermentum rhoncus at faucibus, in vitae purus. Maecenas in vel ligula orci tellus ac, fringilla conubia lorem elit. Dui nulla sodales morbi vel. Massa sed viverra. Maecenas imperdiet donec urna a, ligula sed</p>
Run Code Online (Sandbox Code Playgroud)
这涉及多个方面:
Lorem ipsum dolor sit amet, ante risus massa adipiscing
quisque quis. At mauris tellus in, sed vehicula integer
fermentum rhoncus at faucibus, in vitae purus. Maecenas
in …Run Code Online (Sandbox Code Playgroud) 在chrome canary中,不推荐使用layerX和layerY,但我们应该使用什么呢?
我找到了offsetX,但它不适用于Firefox.所以为了在webkit上没有警告的情况下获取layerX,我已经这样做了:
var x = evt.offsetX || evt.layerX,
y = evt.offsetY || evt.layerY;
Run Code Online (Sandbox Code Playgroud)
但这看起来相当复杂!这是否真的应该让layerX在所有浏览器中运行?
您好我正在尝试获取触摸事件的offsetX,Y,它应该与鼠标事件的offsetX相同.为此,我使用了以下代码:
ev.offsetX = ev.targetTouches[0].pageX- canvasName.offsetLeft
Run Code Online (Sandbox Code Playgroud)
我甚至试图将触摸事件模拟为鼠标事件,但为此目的,我需要offsetX/Y,这在触摸事件中是不可用的.是否有任何方法可以计算offsetX/Y的触摸?请帮忙
例如,
<div style="width:100px;text-align:center">text</div>
Run Code Online (Sandbox Code Playgroud)
我想得到text文本节点的位置和大小,而不是它的div包装器.可能吗?
javascript ×10
html ×4
dom ×2
canvas ×1
coordinates ×1
heatmap ×1
html5 ×1
jquery ×1
offset ×1
reactjs ×1