js获取元素的定位

<div style="margin:200px 100px;" id="linkUrl">xiefuchun.top</div>

function findPosY(obj) { 
  //obj为所要计算的元素,可用id或class获取
  var top = 0, left = 0;
  if (obj.offsetParent) {
    do {
      top += obj.offsetTop;
      left += obj.offsetLeft;
    } while (obj = obj.offsetParent)
    return {top,left};
  }
}

let position = findPosY(document.getElementById("linkUrl"));
console.log(position);   //{top:200,left:100}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下方法获取元素DOM定位路径: 1. 使用浏览器开发者工具:在浏览器中打开页面,右键点击要查找的元素,选择“检查”或“审查元素”,可以打开浏览器的开发者工具,工具面板中会显示该元素的DOM结构,可以通过查看DOM结构来确定元素定位路径。 2. 使用JavaScript代码:可以使用JavaScript代码来获取元素定位路径。例如,使用以下代码可以获取当前元素的XPath路径: ``` function getXPath(element) { if (element.id !== '') { return 'id("' + element.id + '")'; } if (element === document.body) { return element.tagName.toLowerCase(); } var ix = 0; var siblings = element.parentNode.childNodes; for (var i = 0; i < siblings.length; i++) { var sibling = siblings[i]; if (sibling === element) { return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']'; } if (sibling.nodeType === 1 && sibling.tagName === element.tagName) { ix++; } } } ``` 使用该函数可以获取元素的XPath路径,例如: ``` var element = document.getElementById('myElement'); var xpath = getXPath(element); console.log(xpath); ``` 3. 使用CSS选择器:可以使用CSS选择器来获取元素定位路径。例如,使用以下代码可以获取当前元素的CSS选择器路径: ``` function getCssSelector(element) { if (!(element instanceof Element)) return; var path = []; while (element.nodeType === Node.ELEMENT_NODE) { var selector = element.nodeName.toLowerCase(); if (element.id) { selector += '#' + element.id; path.unshift(selector); break; } else { var sib = element, nth = 1; while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++); selector += ':nth-child(' + nth + ')'; } path.unshift(selector); element = element.parentNode; } return path.join(' > '); } ``` 使用该函数可以获取元素的CSS选择器路径,例如: ``` var element = document.getElementById('myElement'); var cssSelector = getCssSelector(element); console.log(cssSelector); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值