如何以编程方式访问 CSS 选择器？ [关闭]答案

【问题标题】：How can I access CSS selectors programmatically? [closed]如何以编程方式访问 CSS 选择器？ [关闭]
【发布时间】：2023-08-01 15:23:02
【问题描述】：

我正在使用我在网络上找到的一个示例，在 CSS3 中创建假定的 HTML5 工具提示。

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative; cursor: pointer;
}  

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

由于应用程序故意不包含 HTML 或 CSS，我如何以编程方式创建它？

据我目前所知，我认为“after”是一个 CSS 选择器，但我无法找到更多关于如何在 DOM 中创建、访问或修改它的信息使用 JavaScript。

请仅使用 JavaScript 解决方案，谢谢。

【问题讨论】：

我....不明白你的问题。您想使用 JavaScript 向 DOM 添加 CSS 规则吗？
可能重复：*.com/questions/311052/…
@Rob W：我今天看到一些问题因为我不知道而被关闭，我想被解释为懒惰（另一个很烦人，因为我完全理解被问到的内容并输入了我的答案，但问题已被删除），但我认为这里肯定有一个问题。肯定会有更多信息要发布，但也不是什么都没有。我认为这相当于写一个垫片。提问者不一定知道正确的术语来正确解释问题，如果他们知道，他们可能已经找到了答案。
@Rob W：我怀疑 tomwrong 只是想结束这个问题，因为它受到了负面关注。我最近在这里看到了不必要的不耐烦，人们对答案投了反对票，只是因为他们不同意。我ping你是因为根据下面的说法，你是第一个提到的人，但你也回答了它，所以我认为这是一个矛盾。我对闭包的机制一无所知，因为没有足够的代表来做到这一点。我只提到了垫片，因为那是我看到一个看似合理的问题的上下文（而不是责备提问者）。
@Rob W：这不是元数据，而是关于 this 的问题（撇开一点点抱怨）。可能的重复，仅仅是一个可能的重复。看着他们，他们是不同的问题。副本想操作样式表，这个问题想在不使用样式表的情况下实现效果（“HTML5”工具提示）。在问答的背景下看到这样的傲慢或不耐烦，真是可惜。乐于助人。（支持性评论是来自 tomwrong 的“告诉我”。）。 Meta是用来讨论Stack Overflow的，这个问题应该在这里讨论。

标签： javascript css

【解决方案1】：

您可以使用insertRule 在文档中添加任何 CSS 规则。在 MDN 页面上，有一种方法显示了一种跨浏览器兼容的方法来插入任意 CSS 规则。

由于您的应用不包含任何 HTML，因此您必须使用 document.createElement 自己创建一个 <style> 对象。当样式表来自不同的来源时，document.styleSheets[0].cssRules 将是 null。

【讨论】：

@tomwrong 为什么要在不使用 CSS 的情况下使用 JavaScript 来模仿/使用 CSS？
@tomwrong “没有 CSS / HTML”是什么意思？ document.createElement 创建一个 HTML 元素。似乎您不愿意使用这个答案，因为 CSS 在其中清晰可见。你可以浪费时间在没有任何 CSS 的情况下使用纯 JS 来实现相同的效果（.style.* 也是 CSS）。 PS。如果没有 HTML（以及某种程度上的 CSS），JavaScript 就无法创建 Web 应用程序。我强烈建议放弃对其他技术的厌恶，并开始使用它。当您有充分的理由使用它时，您会更快地使用它。
@tomwrong：我不知道你为什么会冒犯 Rob W 的 cmets，但如果你生气了，你可能想多休息一段时间，等你好点后再回来（这是什么，4小时？）。如果您想澄清您的问题，请澄清您的问题，而不是留下自怜的编辑信息。你准备好后我会解锁它。
@tomwrong 你不喜欢网络的底层技术，你还在努力成为一名网络开发人员？生命太短暂了……找到另一种谋生方式。
@tomwrong jsfiddle.net/YPyHg (HTML+CSS) 与 jsfiddle.net/JbXeq（纯 JS (v2)）。第一个看起来不错，后者没有CSS就无法改进。您将不得不使用圆角 + 不透明度（恶心）的图像。我没有编写完整的代码，因为您在尝试自己解决问题时没有表现出任何努力。但这是一个可以扩展的基本概念。只是一个警告：这种方法比第一种方法更昂贵（在性能方面）。

【解决方案2】：

由于:hover 是事件绑定的，如果您想在 JS 中执行此操作，则需要将所有相关事件（例如 onmouseover、onmouseout）挂钩到所有相关元素（其中 /\btooltip\b/.test(className)）。

您可以将事件绑定到一个共同的父级（例如document.body，然后检查event 对象以限定触发事件的元素，而不是将事件附加到未知数量的元素）。

至于:after，那是一个伪元素，插入到被选元素之后，因为:hover，它只会在悬停时出现在文档中。所以你只需使用 DOM 方法来添加/删除元素（你不需要每次都创建它，你可以创建一次并保留对它的引用）。

您可以只添加一次，然后切换它的可见性（例如element.style.display = visible ? '' : 'none';），而不是添加/删除元素。

你做什么取决于你。

【讨论】：

当元素在:not(:hover) 和:hover 之间转换时，恰好发生了一些事件。伪类本身不是事件绑定本身。
@BoltClock：User 事件，而不是 DOM 事件。我说的是高级，你说的是低级。