如何在点击时更改头部样式？答案

【问题标题】：How to change style in a head on click?如何在点击时更改头部样式？
【发布时间】：2019-09-23 09:46:35
【问题描述】：

单击时，我想更改“样式”头中的内部样式表。（我不想以内联样式更改它！！）我设法将新的 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;}";
}

【问题讨论】：

只需将新样式属性添加到相同样式标签，旧样式减速将被覆盖。为什么要删除到旧版本？

标签： javascript css onclick styles internals

【解决方案1】：

您尝试删除 class 但使用 id

如下所示。将 id 符号 # 更改为类符号 . 并将 DOM id 更改为类名：

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>

【讨论】：

告诉我更多帮助
我需要 id ...，正如我在问题中提到的，如果有类似 element.idList.remove ("divone");
在您的示例中，样式#divone 只是重复，所以我有两个样式#divone。旧的#divone 应该被移除并替换为新的#divone，但是其他的#divtwo...，不会被删除

【解决方案2】：

  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));
     }


  }

【讨论】：

我不想删除整个样式，只想删除#divone 并将其替换为另一个#divone，因为样式包含其他类似#divtwo .....，很多...

【解决方案3】：

您在单击按钮时提供 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>

【讨论】：

没有jquery，请问你能不能把它转成javascript？
我需要更改 head-internal 样式，而不是 inline 样式