Is there any way to change background color of ::selection (selected text) using JavaScript?

In general where it's not possible to directly change pseudo element settings via JS it is possible to set CSS variables using JS.

So if you have something like this in your stylesheet:

::selection {
  background-color: var(--selcolor);
}

and something like this in your JS:

   element.style.setProperty('--selcolor', selcolor)

it will work.

Here's small example. It changes the selection color variable in the body:

function selChange(color) {
  document.body.style.setProperty('--selcolor', color);
}

body {
  --selcolor: yellow;
}

::selection {
  background-color: var(--selcolor);
}

<button onclick="selChange('cyan');">Cyan</button>
<button onclick="selChange('magenta');">Magenta</button>
<button onclick="selChange('yellow');">Yellow</button>
<p>Highlight some of this text, then click a color and highlight some text...</p>

• you can make it by toggle class give your body a class which will take the default selection style and make a class to toggle it when click the button

Here's example in pure CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .body-selection-green *::selection {
      background: green;
    }

    .body-selection-yellow *::selection {
      background: yellow
    }
  </style>
</head>

<body class="body-selection-green">
  <div> Try to select me </div>
  <button> change selection background</button>
  <script>
    let btn = document.getElementsByTagName("button")[0];
    btn.addEventListener("click", function() {
      if(document.body.classList.contains("body-selection-green")) {
           document.body.classList.remove("body-selection-green")
           document.body.classList.add("body-selection-yellow")
       } else if(document.body.classList.contains("body-selection-yellow")) {
           document.body.classList.remove("body-selection-yellow")
           document.body.classList.add("body-selection-green")
       }
    });
  </script>
</body>
</html>