将CSS类应用于JavaScript变量

Apply CSS class to JavaScript variable?

本文关键字：JavaScript 变量 应用于 CSS      更新时间：2023-09-26

有人知道如何将CSS类应用于JavaScript变量吗?

我有两个变量

var usr = 'You: ' + userinput;
var rpl = 'Chatbot: ' + chatbot.transform(userinput);

usr变量用于将人输入到系统中，rpl变量触发来自数据库的响应。

我需要每个变量有一个不同的CSS类应用到它。

有人能帮忙吗?

不能将CSS类赋值给javascript变量

如果你正在使用HTML，那么你可以使用javascript/jquery将你的值插入到已经设置为类的HTML元素中，或者可以使用javascript/jquery更改元素的类。

正如其他人所说，我们需要知道将变量输出到哪里。CSS样式HTML页面(或其他页面，如XML)，它不能样式脚本语言，这将是没有意义的，因为javascript(或任何其他脚本语言)是不"显示"。

延伸我的回答，考虑你有以下页面:

<html>
    <body>
        <p class="one">
            I am the first paragraph's text.
        </p>
        <p class="two">
            I am the second paragraph's text.
        </p>
    </body>
</html>
现在你有了下面的CSS: 
p.one
{
    color: #f00;
}
p.two
{
    color: #000;
}

现在第一段是红色文本，第二段是黑色文本。但是，您可以使用 javascript/jquery以多种方式更改。下面是一个例子:

document.getElementsByClassName("one").ClassName = "two";
document.getElementsByClassName("two").ClassName = "one";
使用上面的代码，现在段落的颜色将被切换(重要的是要注意，您不仅限于"="操作符。如果你使用"+="，你可以添加，而不删除一个类(即，一个元素将被赋予另一个类，而不带走旧的类)。要用javascript删除一个类，只需使用document.getElementsByClassName("one").ClassName = "";

最后，另一种方法可能只是简单地改变元素本身的样式，像这样(还有，这里有一个链接，你可能会用到:http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/):

document.getElementsByClassName("one").style.color = "#000";

这是我喜欢的方式，除了我个人可能会使用jquery方法:

$(".one").css("color", "#000");

这取决于这些变量如何注入到页面中，但您可能希望将它们包装在span标记中，并看到您最终的结果。

var usr = "<span class='user-input'>You: " + userinput + "</span>";
var rpl = "<span class='chatbot'>Chatbot: " + chatbot.transform(userinput) + "</span>";

在CSS中使用。user-input和。chatbot。

您可以做的另一件事是尝试通过源代码查找在页面中注入数据的html标记。可以通过javascript (jquery)向目标html标签添加类。

CSS用于样式化标记元素(HTML等)。你不能直接对Javascript变量应用CSS。

但是，当您将变量内容翻译成HTML时，您可以将数据包装在HTML标记中，并对其应用CSS样式。

相关文章：