使用“data-*”属性替换 HTML 标签中的“id”属性以实现 CSS 选择目的

2024-03-04

使用“data-”属性来替换元素(标签)中的“id”属性以进行CSS选择,然后在自动化测试脚本中使用这些“data-*”属性是个好主意吗?


No.

id 上的 CSS 选择和 DOM 树选择比选择任何其他属性要快得多。在某些浏览器中,数据属性选择可能比其他属性选择效率低。

例外情况可能是您滥用 id 属性:在其中存储不仅仅是标识符的内容(例如复合数据或不唯一的内容)。如果支持的话,选择部分 id 值会带来糟糕的性能。我建议使用数据属性而不是滥用 id 属性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用“data-*”属性替换 HTML 标签中的“id”属性以实现 CSS 选择目的 的相关文章

  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • z-index 属性到底如何工作?

    如何z index实际上工作吗 它是否对未指定的元素起作用position 它是否支持具有指定的元素 即将它们放在顶部 position 像这样的数字必须是负数吗 div below div div less below div div o
  • 关闭 Godot 中的游戏

    我正在使用 Godot 创建网页游戏 为了关闭游戏 我尝试使用 get tree quit 如果我在 IDE 上使用它 它就可以工作 当我在我的服务器上尝试它时 导出项目后 它不起作用 我确信导出设置没问题 我怎样才能关闭游戏 并且 如何添
  • document.registerElement - 为什么我们需要指定“prototype”和“extends”?

    考虑我想扩展本地button元素 并创建我自己的super button元素 据我所知 它必须遵循以下模式 var SuperButton document registerElement super button prototype Ob
  • 在 JavaScript 中引用 C# 变量

    我已经阅读了很多线程 但我不明白为什么这不起作用 我正在创建一个将用作导航栏的 SharePoint Web 部件 一切都很顺利 直到我尝试在 JS 代码中引用 C 变量 这是来自 VisualWebPart1UserControl asc
  • 如何保存包含框架/iframe 的完整 html 页面?

    在网页抓取期间 我想将当前页面的 html 保存到文件中以供以后调试 browser html在大多数情况下有帮助 但是当页面包含 iframe frame 时 它 的内容不会返回browser html 我必须用类似的东西单独得到它bro
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • HTML5 画布将颜色应用于形状重叠的图像

    我将此图像绘制到 HTML5 画布上 我想做的就是只给它的一部分应用颜色 我想要应用颜色的部分由以下覆盖图像定义 所以 基本上 我想通过叠加来指导我的着色 因此 在覆盖像素与主图像像素相遇的地方 我应该在主图像上应用颜色 至少我认为它是这样
  • 使用命令行将 MediaWiki 维基文本格式转换为 HTML

    我倾向于编写大量文档 因此 MediaWiki 格式对我来说很容易理解 而且比编写传统 HTML 节省了我很多时间 然而 我也写了一篇博客 发现一直从键盘切换到鼠标来输入正确的 HTML 标签会增加很多时间 我希望能够使用 Mediawik
  • 使用 CSS 将 Div 分成 2 列

    我一直在尝试使用 CSS 将 div 分成两列 但我还没有设法让它工作 我的基本结构如下 div div div div div div div div div div div div div div 如果我尝试将右侧和左侧 div 浮动到
  • 禁用 Firefox 的自动填充

    是否可以禁用 Firefox自动填充功能而不禁用自动完成 我知道我可以这样做 autocomplete off 但我不想禁用自动完成 只是禁用自动填充 Firefox 正在填充一些本应为空的隐藏字段 这主要是用户刷新页面时出现的问题 表单字
  • 使用 PHP 简单 HTML DOM 将隐藏的输入标记值作为字符串获取

    我试图获取输入类型隐藏标记值 CAS AH 11 等 以及名称属性 但在运行基于 PHP 的解析器时我得到的只是一个空白页 有人知道出了什么问题吗 我已经查过了将隐藏输入作为字符串抓取 使用 PHP 简单 HTML DOM 解析器 http
  • HTML5 游戏到本机应用程序 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在用 HTML5 制作游戏 我最熟悉 HTML5 并且比 C 等更高级的语言更喜欢它 HTML5
  • 如何在 Jekyll 博客中包含视频标签/mp4 视频

    I am not寻找一种方法链接到 YouTube https stackoverflow com questions 10529859 how to include video in jekyll markdown blog 122738
  • 为什么有些网站在 iPad 上无法缩放?

    有谁知道为什么 iPad 缩放 你知道 你用两根手指放大文本 屏幕 在某些网站上不起作用 例如 脸书网 c3 arc nasa gov nex 我正在工作的网站 谷歌搜索没有显示任何内容 这让我认为这不是一个常见问题 预先感谢您的任何见解
  • jQuery 提交未触发

    我觉得问这个很愚蠢 但为什么我的 submit 没有发出警报 HTML div class buttonbar style margin left 10 div
  • 链接到当前页面,无需查询字符串

    我知道做链接有很多技巧 例如 a href query string 附加查询字符串后将链接到当前页面 有没有办法在删除查询字符串后链接回当前页面 而无需仅输入文件名 例如 在页面foo php q 3 我想链接到foo php 有没有快捷
  • Selenium 上的切换窗口

    我在 Python 中使用 Selenium 和 PhantomJS 我需要打开一个新窗口并控制它 出于测试目的 我这样做 from selenium import webdriver driver webdriver PhantomJS
  • 猫头鹰轮播,制作自定义导航

    所以我有一个包含三张图像的猫头鹰旋转木马 我还在左侧和右侧添加了自定义导航箭头 png 图像 然而 这些箭头目前是无用的 因为我找不到一种方法来真正让它们在我的猫头鹰旋转木马的图像之间切换 我无休止地寻找 找不到解决方案 有任何想法吗 您需

随机推荐

  • 通过 PostMessage 发送/接收字符串

    尽管网上已经有一些资源可以解决这个粗略的主题 但我仍然没有找到适合我的答案 我希望我的同事之间能有充分的沟通VB net过程和我的C 过程 我希望能够发送一个字符串到and来自C 过程 但目前我需要实现 Sending一个字符串到C 处理并
  • MongoDB 交易

    我在 C 中有如下方法 private void Save object mongoCollection Save object someotherRelationaldb Save object 我有两个数据库 我必须在其中保存一个对象
  • 使用 VBA 访问 iframe 内的元素

    我正在尝试使用 PowerPoint VBA 访问使用 Wix Site Builder 制作的网页上的 iframe 元素 我尝试了在谷歌和其他网页上找到的所有内容 但我无法弄清楚 当我尝试使用时 最常见的错误是 自动化错误 conten
  • 如何使用TextureView代替SurfaceView与ExoPlayer的PlayerView一起使用?

    我知道可以在 ExoPlayer 中使用TextureView 但我找不到任何有关如何以正确的方式实现此功能的示例 你能帮我解决这个问题吗 The PlayerView有一个 xml 属性surface type让您选择是否要使用Surfa
  • 在 XML 中意味着什么?

    什么是
  • 如何在 Eclipse 模拟器中创建代表 Samsung Galaxy S 的 AVD?

    我正在开发一款专门针对三星 Galaxy S 的应用程序 我不是在这里做出决定的人 他们希望其布局达到像素精度 我可以只使用普通的 2 1 AVD 吗 所以我尝试创建 WQVGA432 但它看起来像这样 我不知道为什么 LinearLayo
  • 构建参数未解决

    我有 docker compose 和以下代码 version 3 8 services php container name php build context php args PHPVERSION 7 4 XDEBUGVERSION
  • 如何触发/强制更新 Svelte 组件

    我正在尝试了解 svelte 3 反应性的事情 我想在单击按钮时强制刷新用户界面 我正在使用自定义组件AsyncFetcher接受 HTTP post 数据并返回data其插槽的对象 http post 结果 我想要一个禁用功能 因此 当单
  • HttpWebRequest 和本机 GZip 压缩

    当请求使用 Gzip 压缩的页面时 我收到很多以下错误 System IO InvalidDataException GZip 页脚中的 CRC 与 根据解压后计算出的CRC 数据 我正在使用本机 GZipStream 来解压缩 并正在考虑
  • 在虚拟 getter 中添加参数

    我想做的是这样的 Schema virtual getSomething get function what if what return this somethingElse else return this something what
  • Laravel 5 - 写入供应商目录

    Laravel 5 在工作一段时间后崩溃了 这是错误 file put contents Library WebServer Documents project vendor services json 无法打开流 权限被拒绝 在 File
  • java.lang.UnsatisfiedLinkError:dlopen失败:找不到库“/Users/...”

    我想添加另一个库android ndk hello libs https github com googlesamples android ndk issues 364例子 In CMakeLists txt I add this is f
  • MediaRecorder:启动失败

    我已经用谷歌搜索过但没有找到任何解决方案 我正在记录来电和去电 code 与拨出电话配合使用效果良好但给出来电异常 recorder new MediaRecorder File sdCard Environment getExternal
  • 使用 proc_open() 加载 .profile

    情况是这样的 我编写了一个后端应用程序 在某个服务器上运行 在此服务器上 有一个可以通过 ssh 从前端服务器执行的脚本 然后 我的脚本将检查它所需的环境变量是否已正确加载 因为我在脚本本身中严重依赖它们 这可行 尽管不是我想要的方式 建立
  • C隐式extern用于全局变量,什么时候发生,它是如何工作的

    我试图了解 C 全局变量在多个文件 编译单元 之间共享的方式 我已经阅读了精彩的问答here https stackoverflow com questions 1433204 what are extern variables in c
  • 错误 TS2451:无法重新声明块作用域变量“$”

    尝试使用 typescript 2 1 进行编译时出现以下错误 TypeScript 错误 node modules types jquery index d ts 3770 13 错误 TS2451 无法重新声明块作用域变量 不确定这意味
  • Perl 生成的 JavaScript 代码中出现的数字而不是“$(”

    在我正在开发的一个网站上 有一些随机数出现在一个非常简单的 jQuery 中 这些数字并不是本来应该出现的 而是 48等 出现在开头 像这样
  • 如何查找带有空格的范围中第一个和最后一个填充的单元格

    对于宏 我使用 VBA 通过查找第一个和最后一个填充行来确定日期范围 我找到了一种方法 通过使用 End xlToRight 来查找第一个和最后一个填充行 但只有当它是一个连续填充行时才有效 例如 183 183 183 183 183 1
  • 在 subversion 中分支子文件夹是否有效?

    我有一个颠覆项目 它有一个存储库和trunk tags branches顶级项目 对于这个项目 trunk包含一个大部件的文件夹 如 common libs core help install tests 等 问题 它在颠覆分支中是否有效t
  • 使用“data-*”属性替换 HTML 标签中的“id”属性以实现 CSS 选择目的

    使用 data 属性来替换元素 标签 中的 id 属性以进行CSS选择 然后在自动化测试脚本中使用这些 data 属性是个好主意吗 No id 上的 CSS 选择和 DOM 树选择比选择任何其他属性要快得多 在某些浏览器中 数据属性选择可能