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

【问题标题】：Set the text selection color with jQuery. Demo not working使用 jQuery 设置文本选择颜色。演示不工作
【发布时间】：2012-01-18 09:49:15
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

尽管 jquery 选择器的语法看起来与伪类 css 相同，但它们是不同的。

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

【讨论】：

【解决方案2】：

我相信如果你想达到这种效果，你需要应用基于 CSS 类的颜色变化。我分叉了你的 jsfiddle，和heres the result

虽然我认为您的问题很有趣，但我很难确定可以将其付诸实践。您想即时更改主题吗？

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您可以change to using classes 而不是直接从 JavaScript 设置颜色，那么就这样做，因为它更简单。

使用this answer中提供的库：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：