javascript - 使用 JavaScript 更新 Css 类

无法动态更新类的颜色。

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

    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>

最佳答案

这段代码有几个问题:

add on classList 是一个function，你不给它赋值，你调用它:
```
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>

在您的评论中:

I try to change color of my project

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

关于javascript - 使用 JavaScript 更新 Css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58049346/

javascript - 使用 JavaScript 更新 Css 类

上一篇：javascript - 图片边框不显示

下一篇：html - 如何水平居中元素？