-1

我正在尝试编写一个切换器，该切换器将显示/隐藏具有特定标签的任何给定页面上的所有内容。我面临的问题是我无法弄清楚如何识别元素。

网页是使用名为 MadCap Flare 的程序创建的。在 Flare 中，您可以将条件文本标签添加到有助于确定构建和未构建的元素（除其他外）。在最终的 HTML 输出中，这些条件文本标记仍然存在。因此，带有名为 MyTag 的条件文本标记的段落将显示为：

<p data-mc-conditions="MyTag">Here is my paragraph text.</p>

鉴于这些条件文本标签是 Flare 原生的，我试图找到一种方法来识别具有特定条件文本标签的所有元素。

我查看了 GetElementByID、GetElementsByTagName、GetElementsByClassName，并希望有类似于查询和查找具有给定条件文本标记的所有元素的内容。

4

1 回答 1

6

您可以为此使用 CSS 选择器和的组合：
document.querySelector("p[data-mc-conditions='MyTag']");

document.querySelector("p[data-mc-conditions='MyTag']").style.border = "5px solid yellow";
<p data-mc-conditions="MyTag">Here is my paragraph text.</p>

w3schools.com对此querySelector进行了描述：

该querySelector()方法返回第一个匹配指定 CSS 选择器的元素document。

但是，您可能有多个元素，因此您想使用
querySelectorAll().
但是您必须单独循环遍历元素：

var elements = document.querySelectorAll("p[data-mc-conditions='MyTag']");

for (var i = 0; i < elements.length; i++) {
  elements[i].style.border = "5px solid yellow";
}
<p data-mc-conditions="MyTag">Here is my paragraph text.</p>
<p data-mc-conditions="MyTag">Here is my paragraph text.</p>
<p data-mc-conditions="MyTag">Here is my paragraph text.</p>
<p data-mc-conditions="MyTag">Here is my paragraph text.</p>

于 2019-05-10T20:32:08.573 回答