Javascript 如何以编程方式访问CSS选择器？

我在网上找到了一个例子，在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选择器，但我无法找到更多关于如何使用JavaScript在DOM中创建、访问或修改它的信息

---

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

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

由于您的应用程序不包含任何HTML，因此您必须使用自己创建一个对象。当样式表来自不同的来源时，将为空。

因为：hover是事件绑定的，如果要在JS中执行此操作，需要将所有相关事件（例如onmouseover、onmouseout）挂接到所有相关元素，其中/\btooltip\b/.testclassName

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

至于：after，这是一个伪元素，插入到所选元素之后，因为：hover，所以在悬停时它只会出现在文档中。因此，您只需使用DOM方法添加/删除元素，而无需每次都创建它，只需创建一次，并保留对它的引用即可

您可以只添加一次元素，并切换其可见性，而不是添加/删除元素，例如element.style.display=visible？：'没有'

---

你做什么取决于你。

我。。。。我不明白你的问题。你想使用JavaScript将CSS规则添加到DOM中吗？可能重复：@Rob W:我今天看到一些问题因我不知道而结束，被解释为懒惰。我想另一个问题很烦人，因为我完全理解被问的问题，并输入了我的答案，但问题被删除了，但在我看来，这里肯定有一个问题。肯定有更多的信息可以提供，但并不是什么都没有。我认为这相当于写一个垫片。提问者不一定总是知道正确的术语来正确解释问题，如果他们知道，他们可能已经找到了答案。@Rob W:我怀疑TomError只是因为受到了负面的关注才想结束这个问题。我最近在这里看到了不必要的不耐烦情绪，人们只是因为不同意答案就投票反对。我打电话给你是因为根据下面的陈述，你是第一个被提到的人，但你也回答了，所以我认为这是一个矛盾。我对闭包的机制一无所知，因为没有足够的代表来做这件事。我之所以提到填隙片，是因为这是我看到的一个看似合理的问题的背景，而不是斥责提问者。@Rob W:这不是元，而是关于这个问题。可能的复制品，只是可能的复制品。看看它们，它们是不同的问题。复制者想要操纵样式表，这个问题想要在不使用样式表的情况下实现“HTML5”工具提示的效果。在问答中看到这样的傲慢或不耐烦，真是遗憾。要有帮助。支持性的评论是指摘我错了。。Meta用于讨论堆栈溢出，这个问题应该在这里讨论。@TomError为什么要使用JavaScript而不使用CSS来模拟/使用CSS？@TomError没有CSS/HTML是什么意思？document.createElement创建一个HTML元素。您似乎不愿意使用这个答案，因为CSS在其中清晰可见。使用纯JS而不使用任何CSS，可能会浪费时间来实现相同的效果。style.*也是CSS。在某种程度上没有HTML和CSS，JavaScript对于创建web应用程序是无用的。我强烈建议你放弃对其他技术的厌恶，开始使用它。当你有充分的理由使用它时，你会更快地拿起它。@TomError:我不知道你为什么会对Rob W的评论感到生气，但是如果你感到恼火，你可能想多休息一段时间，等你好起来再回来。是什么，4个小时？。如果你想澄清你的问题，请澄清你的问题，不要留下自怜的编辑信息。当你准备好的时候，我会解锁它。@Tom错了，你不喜欢网络的底层技术，你还想成为一名网络开发人员？生命太短暂了…找另一种谋生的方式。@tom错误的HTML+CSS与纯JS。第一个看起来不错，后者没有CSS是无法改进的。您将不得不使用圆角+不透明度恶心的图像。我没有写完整的代码，因为你没有表现出任何努力试图自己解决这个问题。但这是一个基本的想法，你可以

---

延伸只是一个警告：就性能而言，此方法比第一个方法更昂贵。当元素在：not:hover和：hover之间转换时，会发生一些事件。伪类本身不是事件绑定的。@BoltClock:用户事件，而不是DOM事件。我说的是高层次的，你说的是低层次的。