需要使用 javascript 动态更改 p::selection 和 p::-moz-selection 背景

Question

我正在创建文本荧光笔，但我想使用 javascript 将 p::selection 和 p::-moz-selection 属性设置为突出显示的选择颜色 我尝试了很多东西，但没有得到解决方案。我的意思是当我选择段落文本时，选择颜色应该动态地根据我当前选择的颜色。

    function highlightSelection(colour) {
        if (colour == '') {
            colour = '#CB7342';
        }
        var range, sel;

        if (window.getSelection) {

            try {
                if (!document.execCommand("BackColor", false, colour)) {
                    makeEditableAndHighlight(colour);
                }
            } catch (ex) {
                makeEditableAndHighlight(colour)
            }
        } else if (document.selection && document.selection.createRange) {
            // IE <= 8 case
            range = document.selection.createRange();
            range.execCommand("BackColor", false, colour);
        }
    }

    function makeEditableAndHighlight(colour) {
        var range, sel = window.getSelection();
        if (sel.rangeCount && sel.getRangeAt) {
            range = sel.getRangeAt(0);
            /*  oldtxt.push(chosenText());
              oldtxtString = oldtxt.join(' ');
              $("#selectedPoem").text(oldtxtString);*/
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }

        if (!document.execCommand("HiliteColor", false, colour)) {

            document.execCommand("BackColor", false, colour);
        }
        document.designMode = "off";
    }

<div id="text" class="selectionContent"  ontouchend="highlightSelection(document.getElementById('chooseColor').value)", onmouseup="highlightSelection(document.getElementById('chooseColor').value)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Duis at tellus at urna condimentum mattis pellentesque. Aliquam vestibulum morbi blandit cursus risus at. Quis risus sed vulputate odio ut.</p>
<p>Sollicitudin aliquam ultrices sagittis orci a scelerisque. Dignissim enim sit amet venenatis urna cursus eget. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Eget arcu dictum varius duis at consectetur lorem donec. Pharetra convallis posuere morbi leo urna molestie at elementum eu.<p>
<p>Cras fermentum odio eu feugiat pretium nibh ipsum. Molestie at elementum eu facilisis sed odio. Odio aenean sed adipiscing diam. Eros in cursus turpis massa tincidunt dui ut ornare. Faucibus interdum posuere lorem ipsum dolor sit. Turpis egestas integer eget aliquet nibh. Adipiscing commodo elit at imperdiet. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Pellentesque dignissim enim sit amet venenatis urna cursus.</p>

</div>

Answer 1

考虑 CSS 变量来调整颜色：

document.querySelector('#chooseColor').addEventListener('input', function(evt) {
  document.querySelector('#text').style.setProperty("--c", this.value)
});

function highlightSelection(colour) {
  if (colour == '') {
    colour = '#CB7342';
  }
  var range, sel;
  if (window.getSelection) {

    try {
      if (!document.execCommand("BackColor", false, colour)) {
        makeEditableAndHighlight(colour);
      }
    } catch (ex) {
      makeEditableAndHighlight(colour)
    }
  } else if (document.selection && document.selection.createRange) {
    // IE <= 8 case
    range = document.selection.createRange();
    range.execCommand("BackColor", false, colour);
  }
}

function makeEditableAndHighlight(colour) {
  var range, sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
    /*  oldtxt.push(chosenText());
      oldtxtString = oldtxt.join(' ');
      $("#selectedPoem").text(oldtxtString);*/
  }
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }

  if (!document.execCommand("HiliteColor", false, colour)) {

    document.execCommand("BackColor", false, colour);
  }
  document.designMode = "off";
}

*::selection {
  background: var(--c);
}

<input id="chooseColor" type="color">
<div id="text" class="selectionContent" ontouchend="highlightSelection(document.getElementById('chooseColor').value)" , onmouseup="highlightSelection(document.getElementById('chooseColor').value)">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Duis at tellus at urna condimentum mattis pellentesque.
    Aliquam vestibulum morbi blandit cursus risus at. Quis risus sed vulputate odio ut.</p>
  <p>Sollicitudin aliquam ultrices sagittis orci a scelerisque. Dignissim enim sit amet venenatis urna cursus eget. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Eget arcu dictum
    varius duis at consectetur lorem donec. Pharetra convallis posuere morbi leo urna molestie at elementum eu.
  </p>
  <p>Cras fermentum odio eu feugiat pretium nibh ipsum. Molestie at elementum eu facilisis sed odio. Odio aenean sed adipiscing diam. Eros in cursus turpis massa tincidunt dui ut ornare. Faucibus interdum posuere lorem ipsum dolor sit. Turpis egestas integer
    eget aliquet nibh. Adipiscing commodo elit at imperdiet. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Pellentesque dignissim enim sit amet venenatis urna cursus.</p>

</div>

相关：How to update placeholder color using Javascript?