将CSS类应用于JavaScript变量？_Javascript_Html_Css

将CSS类应用于JavaScript变量？

javascript html css

将CSS类应用于JavaScript变量？,javascript,html,css,Javascript,Html,Css,有人知道如何将CSS类应用于JavaScript变量吗我有两个变量： var usr = 'You: ' + userinput; var rpl = 'Chatbot: ' + chatbot.transform(userinput); usr变量用于系统中的人工输入，rpl变量触发来自数据库的响应我需要每个变量都应用不同的CSS类有人能帮忙吗不能将CSS类分配给javascript变量如果您使用的是HTML，那么可以使用javascript/jquery将值插入到已经设置为类的H

有人知道如何将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>

目前，第一段将有红色文本，第二段将有黑色文本。但是，您可以使用javascript/jquery以多种方式改变这一点。一个例子如下：

document.getElementsByClassName("one").ClassName = "two";
document.getElementsByClassName("two").ClassName = "one";

使用上述代码，现在将切换段落的颜色。请务必注意，您不仅限于=运算符。如果您使用+=您可以添加而不删除一个类，也就是说，一个元素将被赋予另一个类而不删除旧类。要使用javascript删除类，只需使用document.getElementsByClassNameone.ClassName=

最后，另一种方法可能只是更改元素本身的样式，同样，这里有一个链接，您可以使用它：

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

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

CSS用于设置标记元素、HTML等的样式。您不能将CSS直接应用于Javascript变量

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

这取决于如何将这些变量注入到页面中，但您可能希望将它们包装在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标记。

在哪里输出聊天？这是一个可以在usr和rpl字符串中使用span标记的普通HTML页面吗？如果是这样的话，就在那里添加css类。这些变量做了什么？它们是如何注入页面的？@SarahChampion只是想让你知道，我将用文档示例来扩展我的答案，希望能让你进一步受益。@SarahChampion，也许你已经知道了这一点，但我不太体谅你，更不用说你在将用户输入直接插入javascript时应该非常小心，以免你成为XSS的牺牲品。我希望用户输入已被彻底清除。检查规则3-在将不受信任的数据插入此链接的JavaScript数据值部分之前进行JavaScript转义：您还可以通过JavaScript/jquery向html元素添加新类。@gaynorvader我想我说过了？@gaynorvader哦，别担心，我明白了，是的，您说得对，只是澄清一下。你说的完全正确@好的，现在我已经提到了：谢谢你的夸奖！

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

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