使用Javascript对象或变量创建css类_Javascript_Html_Css

使用Javascript对象或变量创建css类

javascript html css

使用Javascript对象或变量创建css类,javascript,html,css,Javascript,Html,Css,是否可以基于javascript对象或变量创建css类例如，如果您有一个可以输入十六进制代码的输入。我可以使用javascript提取该值并将其设置为var 然后，我可以使用这个变量设置javascript的内联样式，从而更改页面上文本的颜色。但是，有没有一种方法可以使用这个var并创建一个css类？与其遍历页面的所有元素并设置颜色，不如在页面的一个元素上添加一个类，然后在该类中嵌套样式以级联到其他元素。类似于此的内容？专为你做的，星期五快乐这是密码 <!DOCTYPE html&

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

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

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

类似于此的内容？

专为你做的，星期五快乐

这是密码

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


测试HTML
$（“#提交”）。单击（函数（）{
var textBoxValue=$（“#textBox”）.val（）；
if（textBoxValue.length==0）{
警报（“您没有输入值”）；
}else if（textBoxValue.length<6）{
警报（“您只输入了“+textBoxValue.length+”字符，十六进制代码需要6”）；
}else if（textBoxValue.length==6）{
var newHEXcode=“#”+textBoxValue；
警报（“新十六进制代码=“+newHEXcode”）
}否则{
警告（“您只输入了“+textBoxValue.length+”字符，太多了，十六进制代码需要6个字符”）；
}
});

像这样的朋友？

专为你做的，星期五快乐

这是密码

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


测试HTML
$（“#提交”）。单击（函数（）{
var textBoxValue=$（“#textBox”）.val（）；
if（textBoxValue.length==0）{
警报（“您没有输入值”）；
}else if（textBoxValue.length<6）{
警报（“您只输入了“+textBoxValue.length+”字符，十六进制代码需要6”）；
}else if（textBoxValue.length==6）{
var newHEXcode=“#”+textBoxValue；
警报（“新十六进制代码=“+newHEXcode”）
}否则{
警告（“您只输入了“+textBoxValue.length+”字符，太多了，十六进制代码需要6个字符”）；
}
});

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

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

在本例中，如果您输入十六进制值，如

FFFFFF00

或

800000

或

FF0000

，则它将更改文本

Hello Pratik Ghag！的背景css

$（“#txtInput”）.change（函数（）{
var color=“#”+$（“#txtInput”）.val（）；
$（“.spnMessage”）.css（“背景”，颜色）；
})

输入十六进制颜色代码：


你好，Pratik Ghag
在本例中，如果您输入十六进制值，如FFFF00
或800000
或FF0000
，则它将更改文本Hello Pratik Ghag！的背景css

$（“#txtInput”）.change（函数（）{
var color=“#”+$（“#txtInput”）.val（）；
$（“.spnMessage”）.css（“背景”，颜色）；
})

输入十六进制颜色代码：


你好，Pratik Ghag使用css变量-Caniuse：（即像往常一样不工作）查看一些css预处理器，如SCS。使用JavaScript将很难维护。@user2182349我正在使用SCSS。问题是如何将SCSS中的var设置为JS变量，我认为这是不可能的。请使用css变量-Caniuse：（即像往常一样不工作）查看一些css预处理器，如SCSS。使用JavaScript将很难维护。@user2182349我正在使用SCSS。问题是如何将SCSS中的var设置为JS变量，我认为这是不可能的，是吗？太好了，谢谢！不客气……尽管我必须承认上面提到的阿比舍克·潘迪（你的第一个评论者）——发布后我检查了提供的链接，那里的答案几乎相同。谢谢，是的，我只是看了一下。奇怪的是，我在寻找这个的时候没有找到它！太好了，谢谢！不客气……尽管我必须承认上面提到的阿比舍克·潘迪（你的第一个评论者）——发布后我检查了提供的链接，那里的答案几乎相同。谢谢，是的，我只是看了一下。奇怪的是，我在寻找这个的时候没有找到它！这就是我正在做的。问题是使用输入中的var来创建css类，而不是内联样式，因为内联样式只能将样式应用于它自己的元素，而不是级联。这是我已经在做的事情。问题是使用输入中的var来创建css类，而不是内联样式，因为内联样式只能将样式应用于它自己的元素，而不能级联