gpt4 book ai didi

javascript - 如何在 JavaScript 中查找 HTML 元素的位置?

转载 作者:行者123 更新时间:2023-12-01 15:15:32 25 4
gpt4 key购买 nike

我正在尝试用 连接两个点线在移动其中一个时。我真的迷失在寻找真正的 x, y 文档上任何内容的位置...我已经阅读了有关填充、元素大小和所有这些东西如何扰乱这个过程的信息,但是没有一个教程或示例代码起作用。如果您能看一下我的代码并为某种教程或只是一个基本的起点提供解决方案/网址,我将不胜感激。
提前致谢!

var node = document.querySelector("#node");
var startNode = document.querySelector("#startnode");
var container = document.querySelector("#container");

container.addEventListener("click", SetNodePosition, false);

function SetNodePosition(e) {

startX = getPosition(startNode).x;
startY = getPosition(startNode).y;

nodeX = getPosition(node).x;
nodeY = getPosition(node).y;

console.log("StartNode: " + startX + " - " + startY);
console.log("Node: " + nodeX + " - " + nodeY)

var translate3dValue = "translate3d(" + nodeX + "px," + nodeY + "px, 0)";
node.style.transform = translate3dValue;

if(typeof(document.getElementById("line1")) != 'undefined' && document.getElementById("line1") != null){
updateLine(startX, nodeX, startY, nodeY, "line1");
}
else{
createLine(startX, nodeX, startY, nodeY, "line1");
}
}

function getPosition(element) {

//FIND AND RETURN ELEMENT X, Y POSITION

}

function createLine(x1, x2, y1, y2, lineId) {
distance = Math.sqrt(((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)));

xMid = (x1+x2)/2;
yMid = (y1+y2)/2;

slopeInRadian = Math.atan2(y1-y2, x1-x2);
slopeInDegrees = (slopeInRadian*180)/Math.PI;

var line = document.createElement("div");
line.setAttribute("id", lineId);
line.style.height = "2px"
line.style.backgroundColor = "black"
line.style.width = distance + "px";
line.style.top = yMid + "px";
line.style.left = (xMid - (distance/2)) + "px";
line.style.transform = "rotate(" + slopeInDegrees + "deg)";
document.getElementById("container").appendChild(line);

console.log()
}

function updateLine(x1, x2, y1, y2, lineId) {
distance = Math.sqrt(((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)));

xMid = (x1+x2)/2;
yMid = (y1+y2)/2;

slopeInRadian = Math.atan2(y1-y2, x1-x2);
slopeInDegrees = (slopeInRadian*180)/Math.PI;

var line = document.getElementById(lineId)
line.style.width = distance + "px";
line.style.top = yMid + "px";
line.style.left = (xMid - (distance/2)) + "px";
line.style.transform = "rotate(" + slopeInDegrees + "deg)";
}
#container {
background-color: cornflowerblue;
height: 500px;
width: 500px;
}
#startnode {
height: 50px;
width: 50px;
background-color: green;
border-radius: 50%;

transform: translate3d(200px, 25px, 0);
}
#node {
height: 50px;
width: 50px;
cursor: move;
background-color: red;
border-radius: 50%;

transform: translate3d(50px, 50px, 0);
}

body {
padding: 0;
margin: 0;
}
<body>

<div id="container">

<div id="startnode"></div>
<div id="node"></div>

</div>

<script src="./js/index.js"></script>
</body>

最佳答案

getBoundingClientRect函数将为您提供元素的 x 和 y 位置

function getPosition(element) {
const rect = element.getBoundingClientRect();
return { x: rect.left, y: rect.top };
}

SetNodePosition函数,而不是为每个html元素调用此函数两次,而是为每个元素调用一次,如下所示
function SetNodePosition(e) {

let { x: startNodeX, y:startNodeY } = getPosition(startNode);
startX = startNodeX;
startY = startNodeY;

console.log("StartNode: " + startX + " - " + startY);

....
}

关于javascript - 如何在 JavaScript 中查找 HTML 元素的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61751391/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com