How to change style in a head on click?

Question

On click I want to change the Internal style sheet that is in the "style" head. (I don't want to change it in Inline style!!) I managed to add the new divone css as text but I can't delete the old one (element.classList.remove ("# divone");). Is there an idlist.remove? ..., or any other way to accomplish this. Any idea or suggestion? 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;}";
}

simply add a new style properties to the same style tag and old style deceleration will be overridden. Why do you want to remove to old one? — vssadineni, Sep 23 '19 at 10:20

לבני מלכה · Answer 1 · 2019-09-24T06:30:40.100

You try to delete class but use id

Do it as below. Change the id symbol # to class symbol . also change the DOM id to class name:

function myFunctionTest() {
    var element = document.getElementById("style");
    element.classList.remove("divone");
    document.getElementById("style").textContent += ".divone{width: 400px; height: 35px; background-color: blue;}";
}

<!DOCTYPE html>
<html>
<head>
<style id="style">
.divone{
width: 500px;
height: 50px;
background-color: red;
}
</style>
</head>
<div class="divone">hello !!</div>
<div class="divtwo"></div>
<button onclick="myFunctionTest()">Click me</button>

AS your comment do it with ID

function myFunctionTest() {
  var element = document.querySelectorAll("#style")[0].sheet;
  for (var i = 0; i < element.cssRules.length; i++) {
    if (element.cssRules[i].selectorText === '#divone') {
      element.deleteRule(i);
    }
  }
  document.getElementById("style").textContent += "#divone{width: 400px; height: 35px; background-color: blue;}";
}

<!DOCTYPE html>
<html>

<head>
  <style id="style">
    #divone {
      width: 500px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<div id="divone">hello !!</div>
<div id="divtwo"></div>
<button onclick="myFunctionTest()">Click me</button>

I need it with id ..., as I mentioned in the question if there is something like element.idList.remove ("divone"); — maja, Sep 23 '19 at 15:21
In your example the style #divone is just duplicating so I have two #divone in style. The old #divone should be removed and replaced with the new #divone, but the other #divtwo..., will not be deleted — maja, Sep 24 '19 at 06:50

Pushprajsinh Chudasama · Answer 2 · 2019-09-24T05:09:36.110

0

You give CSS in onclick of button. Try below code.

  

  function myFunction() {
document.getElementById('button').style.cssText = 'background-color: green; color: white; font-size: 44px';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style id="style">
.divone{
width: 500px;
height: 50px;
background-color: red;
}
</style>
</head>
<div class="divone" id="button">hello !!</div>
<div class="divtwo"></div>
<button onclick="myFunction()">Click me</button>

edited Sep 24 '19 at 05:09

answered Sep 23 '19 at 10:06

Pushprajsinh Chudasama

7,772
4
20
43

No jquery, i would ask you if you can turn this into javascript? – maja Sep 23 '19 at 15:23
I need changes to the head-internal style, not the inline style – maja Sep 24 '19 at 05:48

score 0 · Answer 3 · answered Sep 23 '19 at 10:09

  function myFunctionTest() {
    document.getElementById("style").remove();
    var css = '#divone{width: 400px; height: 35px; background-color: red;}',
    head = document.head || document.getElementsById('head')[0],
    style = document.createElement('style');

   head.appendChild(style);

   style.type = 'text/css';
   if (style.styleSheet){
  // This is required for IE8 and below.
   style.styleSheet.cssText = css;
   } else {
      style.appendChild(document.createTextNode(css));
     }


  }

I don't want to remove the whole style but just #divone and replace it with another #divone, because style contains others like #divtwo....., many... — maja, Sep 23 '19 at 15:18

How to change style in a head on click?

3 Answers3