Как изменить стиль в голове по клику? - PullRequest
Новая
       32

Как изменить стиль в голове по клику?

0 голосов
/ 23 сентября 2019

При нажатии я хочу изменить внутреннюю таблицу стилей, которая находится в заголовке «style».(Я не хочу менять его в стиле Inline !!) Мне удалось добавить новый divone css в виде текста, но я не могу удалить старый (element.classList.remove ("# divone");).Есть ли idlist.remove?... или любой другой способ сделать это.Любая идея или предложение?спасибо 

<!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;}";
}

Ответы [ 3 ]

0 голосов
/ 23 сентября 2019

Вы даете CSS в одно нажатие кнопки.Попробуйте код ниже. 

  

  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>
0 голосов
/ 23 сентября 2019 
  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));
     }


  }
0 голосов
/ 23 сентября 2019

Вы пытаетесь удалить class , но используете id

Сделайте это, как показано ниже.Измените идентификатор id # на символ класса ., а также измените идентификатор DOM на имя класса: 

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>

КАК ваш комментарий сделайте это с 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>
...