I am trying to change the internal style sheet in the "style" head when a user clicks, without using inline styles. I have successfully added new CSS for divone as text, but I can't seem to delete the old one (element.classList.remove("#divone");). Is there an idlist.remove method or any other way to achieve this? Any suggestions would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<style id="style">
#divone{
width: 500px;
height: 50px;
background-color: red;
}
#divtwo{
width: 400px;
height: 80px;
background-color: purple;
}
</style>
</head>
<div id="divone"></div>
<div id="divtwo"></div>
<button onclick="myFunctionTest()">Click me</button>
function myFunctionTest() {
var element = document.getElementById("style");
element.classList.remove("#divone");
document.getElementById("style").textContent += "#divone{width: 400px; height: 35px; background-color: red;}";
}