Question

有谁知道如何将CSS类应用于JavaScript变量？

我有两个变量：

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

usr变量用于人类输入系统，rpl变量触发数据库的响应。

我需要为每个变量应用不同的CSS类。

有人可以帮忙吗？

Answer 1

您无法将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");

Answer 2

CSS用于样式化标记元素（HTML等）。您无法直接将CSS应用于Javascript变量。

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

Answer 3

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

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

在CSS中使用.user-input ans .chatbot。

您可以做的另一件事是尝试搜索通过源代码在页面中注入数据的html标记。可以通过javascript（jquery）将类添加到目标html标记。

将CSS类应用于JavaScript变量？

3 个答案: