Need to change the p::selection and p::-moz-selection background dynamically using javascript

Question

I am creating text highlighter but I want to set the p::selection and p::-moz-selection propertry as highlighted selection color using javascript I tried lots of things but did not get the solution. I mean when I select the paragraph text then the selection color should be as per my current selected color dynamically.

    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>

if you add the missing element for example `` your code wokrs fine https://jsfiddle.net/1kc3Lrm4/ what's the issue? — Temani Afif, Jun 13 '20 at 08:02
@TemaniAfif Thanks for your reply but my question is about the ::selection color change dynamically, as you are showing me the background after selecting the text, but I want when we select the text on that time it is by default blue, I want to set/change that blue dynamically — Sanjay Samant, Jun 13 '20 at 08:24

Temani Afif · Accepted Answer · 2020-06-13T15:50:54.467

Consider CSS variables to adjust the coloration:

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>

Related: How to update placeholder color using Javascript?

Need to change the p::selection and p::-moz-selection background dynamically using javascript

1 Answers1