使用jQuery设置文本选择颜色。演示不工作

Question

http://jsfiddle.net/uKdPM/

我在css中设置了::selection颜色，因此当您在屏幕上突出显示文本时，文本的颜色为粉红色。 我正试图在页面加载时通过jQuery覆盖该颜色。 好像它应该是超级简单的。 但这对我不起作用。

Answer 1

我相信如果你想要达到这种效果，你需要根据CSS类应用颜色变化。 我分叉你的jsfiddle， 继承人的结果

虽然我认为你的问题很有意思，但我很难确定哪些可以投入实际使用。 你想动态改变主题吗？

Answer 2

根据这个问题，您不能更改选择的突出显示颜色，因为没有用于操作伪类的DOM接口。 你可以做的是改变元素的类。

Answer 3

我遇到了同样的问题，我偶然发现了这个问题。 解决方案可以是将带有css属性的<style>标记添加到文档正文中。

$('<style> p::selection{ background-color:#000; } p::-moz-selection{ background-color:#000; }</style>').insertAfter('body *:last');

这可能不是最优雅的方式，但至少它是有效的。

Answer 4

::selection是一个CSS伪类，而不是jquery选择器！

你不能这样做$('p::selection').css({color: "#3c3"})并期望改变文本选择颜色。

---

• $(<selector>)允许您以灵活的方式选择 dom元素，使用ID，css类，属性......

• :hover ， :after ... ::selection是CSS-pseudo选择器，它允许你设置样式元素。

即使jquery选择器的语法看起来与伪类css相同，它们也是不同的。

---

顺便说一句，不可能以编程方式更改css伪类的样式（例如:hover ...）。

Answer 5

如果您可以更改为使用类而不是直接从JavaScript设置颜色，那么这样做是因为它更简单。

否则，请参阅此问题： 从JavaScript设置CSS伪类规则

使用此答案中提供的库：

jss('p::selection', {
    color: '#3c3'
});

http://jsfiddle.net/thirtydot/uKdPM/9/