使用 JavaScript 更新 Css 类答案

【问题标题】：Update Css Class with JavaScript使用 JavaScript 更新 Css 类
【发布时间】：2019-09-22 12:44:17
【问题描述】：

无法动态更新类的颜色。

顺便说一句，代码在没有类的情况下工作正常，但在有类的情况下，它不起作用。

    function myFunction() {
    var cssColor=".MyClass h1{background-color:pink;color:black;}  .MyClass p{background-color:pink;color:white;}";
     cssColor = cssColor.replace('pink', document.getElementById("txtColor").value);
    document.getElementById("mainBody").style.cssText = cssColor;
    document.getElementById("mainBody").classList.add = cssColor;
    document.getElementById('mainBody').className = 'MyClass';
    }

    <!DOCTYPE html>
    <html>
    <body id="mainBody" >
    
    <h1>Title</h1>
    <p >This is a paragraph.</p>
    
     <input type="text" name="txtColor" id="txtColor"  style="display: inline-block;width: 50px; height:30px;direction: ltr" maxlength="7">
    <button type="button" onclick="myFunction()">Set style for p</button>
    
  
    
    </body>
    </html>

【问题讨论】：

您能解释一下代码中的实际问题是什么，您面临哪种类型的问题
.classList.add(cssColor) — 这是一个函数
@PointyI 更改为 document.getElementById("mainBody").classList.add('MyClass'); 但没有任何变化，它不起作用
@AMARMAGAR 我尝试改变我的项目的颜色。所以我的项目有很多类，这是一个学习的样本。 tnx.

标签： javascript html css class getelementbyid

【解决方案1】：

该代码有几个问题：

classList 上的add 是一个函数，你不给它赋值，你调用它：
```
document.getElementById('mainBody').classList.add('MyClass');
```
您的下一条语句分配给className，这将消除对classList.add 的调用。所以应该删除其中一个或另一个。
body 元素上的.style.cssText 属性包含body 的内联样式，不是样式表。您分配给它的是样式表文本。您可以将其放在 style 元素中（或放在单独的 .css 文件中，并将其与 link 元素链接）。

很难为您提供积极的建议，因为您不清楚您想做什么。如果您想将这些样式应用到页面，将pink 更新为用户输入的颜色，您可以拥有一个style 元素并更新其文本内容。我不会使用pink，不过，我会使用一些像%%COLOR%% 这样的令牌。我还会使用现代事件处理而不是 onclick 属性，类似于以下内容：

var css =
  "h1 { " +
  "    background-color: %%COLOR%%; " +
  "    color: black; " +
  "} " +
  "p { " +
  "    background-color: %%COLOR%%; " +
  "    color: white; " +
  "}";

function setStyleToColor(color) {
    document.getElementById("the-style").textContent = css.replace(/%%COLOR%%/g, color);
}

function myFunction() {
    setStyleToColor(document.getElementById("txtColor").value);
}
setStyleToColor("pink");
document.querySelector("button").addEventListener("click", myFunction);

<style id="the-style"></style>
<h1>This is a heading</h1>
<p>This is a paragraph</p>

<input type="text" name="txtColor" id="txtColor"  style="display: inline-block;width: 50px; height:30px;direction: ltr" maxlength="7">
<button type="button">Set style for p</button>

在你说过的评论中：

我尝试改变我的项目的颜色

我会通过拥有多个单独的样式表（pink.css、blue.css）并使用link 元素将它们链接到项目来做到这一点。更新样式变成删除旧链接并设置新链接。

【讨论】：

【解决方案2】：

这将改变你的 p 标签的颜色。您还可以为要着色的所有段落分配一个类，然后通过each-loop 循环遍历它。

function myFunction() {
  var pColor = "color:white;"
  pColor = pColor.replace('white', document.getElementById("txtColor").value);

  document.getElementById("paragraph").style.cssText = pColor;

  document.getElementById('mainBody').className = 'MyClass';
}

<!DOCTYPE html>
<html>

<body id="mainBody">

  <h1>Title</h1>
  <p id="paragraph">This is a paragraph.</p>

  <input type="text" name="txtColor" id="txtColor" style="display: inline-block;width: 50px; height:30px;direction: ltr" maxlength="7">
  <button type="button" onclick="myFunction()">Set style for p</button>



</body>

</html>

【讨论】：

正如我所说，当我们没有上课时它工作得很好，但是h1 怎么样，身体上有很多元素呢，我希望通过使用类来改变。 tnx

【解决方案3】：

也许，您可以在文档头中包含样式块。并不断更新内部文本以更新样式

var style = document.createElement("style");
var cssColor=
 ".MyClass h1{background-color:pink;color:black;}  .MyClass p{background-color:pink;color:white;}";
document.head.appendChild(style);

function myFunction() {
  cssColor = cssColor.replace('pink', document.getElementById("txtColor").value);
  style.innerText = cssColor;
  document.getElementById('mainBody').className = 'MyClass';
}

【讨论】：