使用 Javascript 对象或 var 创建 CSS 类 [重复]答案

【问题标题】：Creating a css class with a Javascript object or var [duplicate]使用 Javascript 对象或 var 创建 CSS 类 [重复]
【发布时间】：2017-09-26 08:14:56
【问题描述】：

是否可以基于 javascript 对象或变量创建 css 类？

例如，如果您有一个可以输入十六进制代码的输入。我可以使用 javascript 提取值并将其设置为 var。

然后我可以使用这个 var 来设置带有 javascript 的内联样式，从而改变页面上文本的颜色。但是有没有办法可以使用这个 var 并创建一个 css 类？我宁愿在页面的一个元素上添加一个类，然后将样式嵌套在该类中以级联到其他元素，而不是遍历页面的所有元素并设置颜色。

【问题讨论】：

使用 css 变量 - developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Caniuse: caniuse.com/#search=variables（IE 照常不起作用）
查看一些 CSS 预处理器，例如 SCSS。使用 JavaScript 将难以维护。
@user2182349 我正在使用 SCSS。问题是如何将 SCSS 中的 var 设置为 JS 变量，我不认为这是可能的吗？

标签： javascript html css

【解决方案1】：

像这样的哥们？ https://jsfiddle.net/BillyG83/hcek46a1/2/

专为你打造，周五快乐

这里是代码

<!DOCTYPE html>
<html>
    <head>
        <title>Test HTML</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="textBox"/>
        <input type="button" id="submit" value="Go"/>
    </body>
    <script type="text/javascript">
    $("#submit").click(function(){
        var textBoxValue = $("#textBox").val();
        if (textBoxValue.length == 0) {
            alert("you didnt enter a value");
        } else if (textBoxValue.length < 6) {
            alert("you only entered " + textBoxValue.length + " chacters, a HEX code needs 6");
        } else if (textBoxValue.length == 6) {
            var newHEXcode = "#" + textBoxValue;
            alert("new HEX code = " + newHEXcode)
        } else {
            alert("you only entered " + textBoxValue.length + " chacters, thats too many, a HEX code needs 6");
        }
    });
</script>
</html>

【讨论】：

【解决方案2】：

有很多方法可以在页面加载后动态改变 CSS 样式。如果您想像普通的 css 脚本一样应用更改，您可以通过 javascript 将样式标签添加到标题中。例如。

var color = "blue" ; // from your input
var element  = document.createElement("style");
element.id = "myStyleId" ; // so you can get and alter/replace/remove later
element.innerHTML = ".myClass {color:" + color + ";}" ; // css rule
var header = document.getElementsByTagName("HEAD")[0] ;
header.appendChild(element) ;

【讨论】：

非常感谢！
不客气......虽然必须承认上面的 Abhishek Pandey（你的第一个评论者） - 发布后我检查了提供的链接，答案几乎相同。
谢谢，是的，我刚刚看了看。奇怪的是我在找这个的时候没有找到！

【解决方案3】：

在本例中，如果您输入像 FFFF00 或 800000 或 FF0000 这样的十六进制值，那么它将更改文本 Hello Pratik Ghag! 的背景 css。

$("#txtInput").change(function(){
  var color = "#"+$("#txtInput").val();
  $(".spnMessage").css("background",color);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Enter hex color code:</p>
<input id="txtInput" /><br>

<span class="spnMessage">Hello Pratik Ghag!</span>

【讨论】：

这就是我已经在做的事情了。问题是使用输入中的 var 创建一个 css 类而不是内联样式，因为内联样式只能将样式应用于它自己的元素而不是级联