将 Css Class 更新为 JavaScript

Question

无法动态更新 class 的颜色。

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

    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>

Answer 1

这将更改 p 标签的颜色。您还可以将 class 分配给所有要着色的段落，然后通过 each 循环遍历它。

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>

Answer 2

该代码有几个问题：

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

您在评论中说：

I try to change color of my project

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

Answer 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';
}

将 Css Class 更新为 JavaScript

Update Css Class with JavaScript

html

javascript

css

class

getelementbyid