Question

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

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

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

Answer 1

在页面加载后动态改变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) ;

Answer 2

喜欢这个好友的东西？ 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>

Answer 3

在此示例中，如果输入十六进制值，如FFFF00或800000或FF0000，则会更改文本Hello Pratik Ghag!的背景css。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用Javascript对象或var创建css类

3 个答案: