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

-4

我正在从我在网上找到的一个例子开始，在CSS3中创建所谓的HTML5工具提示。如何以编程方式访问CSS选择器？

.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？

从我目前可以告诉，我认为“后”是CSS选择器，但我不能找出如何我可以创造，获取或使用JavaScript修改这个DOM中的任何信息。

只有JavaScript解决方案请，谢谢。

来源

2012-06-27 thomas-peter

我....不明白你的问题。你想使用JavaScript将CSS规则添加到DOM？ –

可能的重复：http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – micadelli

严重的是，停止。 – BoltClock

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

由于您的应用程序不包含任何HTML，您必须使用document.createElement自己创建<style>对象。当样式表来自不同的原点时，document.styleSheets[0].cssRules将为null。

来源

2012-06-27 09:30:23

谢谢，但它包含内联CSS我试图创建一个不使用CSS或HTML的演示应用程序 –

@tomwrong为什么你想要模仿/使用CSS而不使用CSS？ –

我不太喜欢CSS或HTML，这让我非常不受欢迎，我已经工作了近一年了.--) –

由于:hover是事件的约束，需要所有相关的事件（例如onmouseover，onmouseout）钩到所有相关因素（其中/\btooltip\b/.test(className)），如果你想这样做的JS。

你可以只结合事件，以共同的父（例如document.body，然后检查event对象限定触发，而不是一个事件连接到一个未知的数量的元件的情况下的元素）。

至于:after，即是所选择的元素之后插入一个伪元件，并且由于:hover也只会是在文档中悬停时。因此，您只需使用DOM方法来添加/删除元素（您不需要每次都创建它，您可以创建一次并只保留对它的引用）。

除了添加/删除元素，您可以只添加一次，并切换其可见性（例如element.style.display = visible ? '' : 'none';）。

你做什么取决于你。

来源

2012-06-27 10:54:11

只有当一个元素在'：not（：hover）'和'：hover'之间转换时才会发生事件。伪类本身不是事件绑定的*本身*。 – BoltClock

@BoltClock：*用户*事件，而不是DOM事件。我说的是高层次，你说的很低。 –

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

回答

相关问题