javascript - 如何获取 Javascript 中给定元素的非绝对 css 路径？-6ren

javascript - 如何获取 Javascript 中给定元素的非绝对 css 路径？

转载作者：行者123 更新时间：2023-11-28 13:59:39

24

4

我希望能够使用 Javascript 获取元素的非绝对 css 路径，以便我随后可以调用:

document.querySelectorAll()

我正在尝试从共享相同 css 路径 的页面中获取所有元素。

例如使用 Google 的搜索结果页面:

CSS 选择器(绝对)是:

div.g:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > h3:nth-child(1) > div:nth-child(1)

CSS 路径(非绝对路径)为:

html body#gsr.srp.tbo.vasq div#main div#cnt div.mw div#rcnt div.col div#center_col div#res.med div#search div div#rso div.bkWMgd div.srg div.g div div.rc div.r a h3.LC20lb div.ellip

我看到的每个答案通常都会返回元素的绝对路径(css 选择器)——即第 n 个子元素。例如:Get CSS path from Dom element .

有没有人知道如何获得适用于页面上多个元素的纯 css 路径？

编辑:我真正要找的是 Firefox Web Developer Inspector 工具中的源代码，您可以在其中右键单击并选择“复制 CSS 路径”。如果有人对此有指点，我将不胜感激。

最佳答案

这有点困难，因为您必须决定所需的特异性级别。您可以选择包含或忽略标签、ID、类和属性，所有这些都有自己的格式。我已经编写了一个函数来为您执行此操作。

nonabsoluteCSS()接受任何元素和 bool 值，以确定是否包含元素的标签名称、类、id 和属性。它是递归的，将爬上 DOM 树，直到它到达 <body>。元素。

如果您想了解伪元素和 sibling 等内容，您可以进一步扩展此功能，但这应该是一个很好的起点。

$(function(){
	$("a").click(function(){
  	console.log(nonabsoluteCSS(this, true, true, true, true));
  });
});

function nonabsoluteCSS(elm, useElements, useClasses, useIds, useAttributes)
{
  if($(elm).length < 1)
  	return false;

  var p = $(elm).parent()[0];
  var e = $(elm)[0];
  
  var output = "";
  
  if(!useElements && !useClasses && !useIds && !useAttributes)
  	output = "*";
  else
  {
    if(useElements)
    	output += e.tagName.toLowerCase();
    if(useClasses)
    {
    	for(var i = 0; i < e.classList.length; i++)
      	output += "."+e.classList[i];
    }
    if(useIds && e.id != "")
    	output += "#"+e.id;
    if(useAttributes)
    {
    	for(var i = 0; i < e.attributes.length; i++)
      {
      	output += "["+e.attributes[i].name+"=\""+e.attributes[i].value+"\"]";
      }
    }
  }
  
  if(p.tagName.toLowerCase() != "body")
  {
  	return nonabsoluteCSS(p, useClasses, useIds, useAttributes) + " " + output;
  }
  else
  {
  	return output;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="class1">
    <span class="class2 class3" id="spanid">
      <a href="#">
        Click me to see my CSS path.
      </a>
    </span>
  </p>
</div>

关于javascript - 如何获取 Javascript 中给定元素的非绝对 css 路径？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57932398/

24

4

0

文章推荐： javascript - 让 JavaScript 变得漂亮的最重要技巧

文章推荐： javascript - CSS Toggle Switch(Checkbox) 值始终打开/选中

文章推荐： css - 导航栏垫片未正确定位

java - 新文件(路径)或class.getResourses(路径)？
BufferedImage image = ImageIO.read(SpriteSheet.class.getResource(path)); BufferedImage image = Image
reactjs - 部署到 heroku 路径 ="/"路径 ="/favicon.ico"时出现问题
希望有人能够帮助我解决将我的 React 应用程序推送到 Heroku 时遇到的问题。 heroku 日志反复显示以下错误。 at=error code=H10 desc="App crashed"
apache-spark - Kotlin:get(路径:......) Unresolved reference :路径
我是 Kotlin 的新手，我正在经历这样的例子。 . . package com.example.lambda1 import spark.Spark.get fun main(args: Arra
android - 无法创建 JVM : error code -6, JVM 路径:C:\
如果您已经安装了 32 位 JDK，请在中定义一个 JAVA_HOME 变量 Computer>System Properties>System Setting>Enviorment VAriable
java - 转换 Java 文件 ://URL to File(. ..) 路径，独立于平台，包括 UNC 路径
我正在开发一个独立于平台的应用程序。我收到一个文件 URL*。在 Windows 上，这些是: file:///Z:/folder%20to%20file/file.txt file://host/f
objective-c - Cocoa/Objective-C 获取一个 HFS 路径(路径 :to:desktop) from a posix path (path/to/desktop)
我在 OSX、Objective-C 上。我有一个像这样的路径/NSURL /Users/xxx/Desktop/image2.png 但我将它传递给第三方应用程序，该应用程序会像 excpect
macos - 如何在 Mac os 上的 Android Studio 中提供 Flutter SDK 路径，如何在 MACOS 中更新 Flutter SDK 路径？
我已经安装了 Android studio 和插件的 DART，FLUTTER 来启动 flutter，但是因为我在创建我的第一个 flutter 项目时无法提供 sdk 路径。最佳答案我试图找出
django - 我可以在同一个 url 模式中包含两个不同的 url 吗？示例 [路径 ('api/' , 包括 ('quiz.urls' )), 路径 ('api/' , 包括 ('user.urls' )) ]
127.0.0.1:8000/api/仅包含来自第二个应用程序的 url，但我将两个 url 模块链接到相同的模式。甚至有可能做到这一点吗？第一个应用程序: from django.urls imp
WordPress媒体完全控制图像uri/路径
对于大量图像(大约 1k，加上相同数量的拇指，在大约 500 个文件夹中)，我们要求网站上使用的所有图像 URI 都必须具有 SEO 优化路径。它们已经准备好并提供完整的路径结构(每个文件夹包含一个具
安卓新文件(路径)
为什么 f 不是一个文件？什么可能导致这种情况？ String currentPhotoPath = "file:/storage/sdcard0/Pictures/someFileName.
Gradle:有效的项目名称/路径？
Gradle 中的项目名称或路径中允许使用哪些字符？它是否与特定操作系统的目录名称中允许的字符相同(例如: http://en.wikipedia.org/wiki/Filename#Reserve
SQL:在表中查找缺少的层次结构文件夹(路径)
我有一个包含文件夹路径的表格。我需要找到层次结构中这些文件夹之间的所有“差距”。我的意思是，如果表格包含这 3 个文件夹: 'A' 'A\B\C' 'A\B\C\D\E\F\G' 我需要在层次结构中找
存储库的 svn 路径
我在 Linux 服务器上的/home/subversion 中安装了 svn - 那里有一个 ROOT 文件夹，其中包含 db 和 conf 等文件夹。没有映射到项目名称的文件夹，请有人告诉我如何列
webpack - 文件加载器中的意外 [路径]
对于我的图像位置:/src/assets/bitmap/sample.jpg 给出了关键配置: context: resolve('src') output: { path: resolve('b
圆角为圆弧的 SVG 路径
我需要创建带有圆角的 SVG 路径，以将它们导出到 DXF 进行切割。我的问题是角应该是圆弧，而不是贝塞尔曲线。使用 arc 命令相对容易处理直角，因为半径也是从拐角到圆弧起点的距离。对于其他角度，
Airflow 连接类型文件(路径)
大家好，我正在玩 Airflow，我正在阅读这篇很有帮助的 tutorial .我正在寻求帮助以更好地了解 Admin->Connection 如何在 Conn Type: File (path) 方
r - 如何在R中正确设置库目录/路径
我的目标是定义R将用于安装和搜索库的单个路径。我read可以通过更改Rprofile.site安装路径中的R文件来完成。我在那里尝试了两个命令: .libPaths("D:/RLibrary") .L
AngularJS:从页面获取以前的网址(路径)
我有一个问题:当我在一个页面中时，我想返回到上一页。我使用 $routeProvider。如何读取之前的 url？我尝试在我的 Controller 中使用此代码但不起作用... angular.m
在未参与合并操作的分支上找不到 svn 路径
我正在尝试将一个文件从我的主干合并到一个分支(wc)，并且对于看起来位于当前合并操作中不涉及的分支上的路径出现奇怪的未找到路径错误。例如，在我们的 svn 项目中，我们有: 分行分支 0 分支 1
r - 回溯一棵树的两列数据的父项/路径
我有一个树数据序列化如下: 关系:P到C是“一对多”，C到P是“一对一”。所以列 P 可能有重复的值，但列 C 有唯一的值。 P, C 1, 2 1, 3 3, 4 2, 5 4, 6 # in da

首页

博学

6Ren·AI

商城

javascript - 如何获取 Javascript 中给定元素的非绝对 css 路径？