反转选择内的颜色答案

【问题标题】：Invert colors inside selection反转选择内的颜色
【发布时间】：2021-11-13 01:19:51
【问题描述】：

我正在制作我的网站，但遇到了问题。

我正在尝试反转文本选择中的颜色。我试过了，但它不起作用：

::selection {
    fiter: invert();
}

::selection {
  color: white;
  background-color: black;
}
.p1 {
    color: black;
    background-color: white;
}
.p2 {
    color: red;
    background-color: white;
}
.p3 {
    color: cyan;
    background-color: black;
}

<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">After select I want paragraph 2 to look like this:</p>

你能帮帮我吗？

【问题讨论】：

尝试使用 invert(1)
它不起作用。
参见developer.mozilla.org/en-US/docs/Web/CSS/::selection 只有某些 CSS 属性可以与 ::selection 一起使用。该列表很短，过滤器不是其中之一（也不是反转）。您可能不得不求助于 Javascript 作为通用解决方案。
任何想法我该怎么做？
这能解决您的问题吗？ stackoverflow.com/questions/17741629/…

标签： javascript html css

【解决方案1】：

“滤镜通常用于调整图像、背景和边框的渲染。” 过滤器不与::selection 一起使用。

你应该使用：

::selection {
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

&lt;p&gt;Lorem ipsum&lt;/p&gt;

【讨论】：

我知道，但我需要反转颜色。
浏览器自动反转颜色。
但是如果我有另一个段落有其他颜色，它不会被反转。
能否分享部分代码？

【解决方案2】：

我看不到如何在复杂情况下执行此操作，其中选择包含几个可能单独设置颜色和背景颜色的 HTML 元素（当然，一些复杂的 HTML/CSS 解析必须能够做到这一点，但我我没有能力）。

但是，我们可以相当简单地处理颜色和背景颜色在选择的父 div 中保持一致的简单情况。

在选择事件中，这个 sn-p 读取父元素的计算样式，计算颜色和背景颜色的倒数，并将 CSS 变量设置为这些变量，这些变量在选择伪元素中被拾取和使用。

document.addEventListener('selectionchange', (e) => {
  function invert(color) {
    color = color.replace('rgb(', '');
    color = color.replace(')', '');
    color = color.replace('rgba(', '');
    let colors = color.split(',');
    let r = colors[0].replace(' ', '');
    let g = colors[1].replace(' ', '');
    let b = colors[2].replace(' ', '');
    let a = (colors.length > 3) ? colors[3].replace(' ', '') : 1;
    r = ~r & 255;
    g = ~g & 255;
    b = ~b & 255;
    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
  }
  selection = window.getSelection();
  if (selection.anchorNode) {
    const parent = selection.anchorNode.parentElement;
    const style = window.getComputedStyle(parent);
    parent.style.setProperty('--color', invert(style.color));
    parent.style.setProperty('--background-color', invert(style.backgroundColor));
  }
});

.invertSelectionColors::selection {
  color: var(--color);
  background-color: var(--background-color);
}

<div class="invertSelectionColors" style="background-color: cyan;color:#000000;">
  here is some text originally background color cyan and color #000000
</div>
<div class="invertSelectionColors" style="background-color: rgba(255, 0, 0, 0.5);color:#0000ffff;">
  here is some text originally background color rgba(255, 0, 0, 0.5) and color #0000ffff
</div>

【讨论】：

【解决方案3】：

目前，您根本无法通过纯粹的样式来做到这一点。您必须为此编写 javascript 代码。

只有某些 CSS 属性可以与 ::selection 一起使用：

颜色

背景色

文本装饰及其相关属性

文字阴影

描边颜色、填充颜色和描边宽度

来自moz documentation，但我猜它适用于所有浏览器。

【讨论】：