将 CSS 类应用于 JavaScript 变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16085196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS class to JavaScript variable?
提问by Sarah Champion
Does anyone know how I can apply a CSS class to a JavaScript variable?
有谁知道如何将 CSS 类应用于 JavaScript 变量？
I have two variables:
我有两个变量：
var usr = 'You: ' + userinput;
var rpl = 'Chatbot: ' + chatbot.transform(userinput);
The usr variable is for human input into the system, and the rpl variable triggers a response from a database.
usr 变量用于人工输入系统，而 rpl 变量触发来自数据库的响应。
I need each variable to have a different CSS class applied to it.
我需要每个变量都应用不同的 CSS 类。
Can anybody help?
有人可以帮忙吗？
回答by VoidKing
You can't assign a CSS class to a javascript variable.
您不能将 CSS 类分配给 javascript 变量。
If you are using HTML, then you can use javascript/jquery to insert your values into HTML elements that are already set up as a class, or the classes of elements can be changed with javascript/jquery.
如果您使用的是 HTML，那么您可以使用 javascript/jquery 将您的值插入到已经设置为类的 HTML 元素中，或者可以使用 javascript/jquery 更改元素的类。
As others have stated, we need to know where you are outputting your variables to. CSS styles HTML pages (or other pages, like XML), it can't style a scripting language, that would make no sense, because javascript (or any other scripting language) isn't "displayed".
正如其他人所说，我们需要知道您将变量输出到哪里。CSS 样式 HTML 页面（或其他页面，如 XML），它无法设置脚本语言的样式，这是没有意义的，因为 javascript（或任何其他脚本语言）不会“显示”。
To extend my answer, consider that you have the following page:
为了扩展我的答案，请考虑您有以下页面：
<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>
Now you have the following CSS:
现在您拥有以下 CSS：
p.one
{
color: #f00;
}
p.two
{
color: #000;
}
As it stands the first paragraph will have red text and the second will have black text. However, you can change this in multiple ways usingjavascript/jquery. One example is below:
目前，第一段将有红色文本，第二段将有黑色文本。但是，您可以使用javascript/jquery以多种方式更改此设置。一个例子如下：
document.getElementsByClassName("one").ClassName = "two";
document.getElementsByClassName("two").ClassName = "one";
With the above code, now the paragraph's colors will be switched (it is important to note that you are not limited to only the "=" operator. If you use "+=" you can add, without removing, a class (i.e., an element will be given another class without taking away the old class). To remove a class with javascript, simply use something like, document.getElementsByClassName("one").ClassName = "";
使用上面的代码，现在段落的颜色将被切换（重要的是要注意，您不仅限于“=”运算符。如果您使用“+=”，则可以添加而不删除类（即，一个元素将被赋予另一个类而不带走旧类。要使用javascript删除一个类，只需使用类似的东西， document.getElementsByClassName("one").ClassName = "";
Lastly, another approach might simply be to change the style for the elements themselves, like so (also, here's a link you might get use out of: http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/):
最后，另一种方法可能只是更改元素本身的样式，就像这样（此外，您可能会使用以下链接：http: //answers.oreilly.com/topic/1819-how-to-change -an-elements-css-properties-with-javascript/):
document.getElementsByClassName("one").style.color = "#000";
Which is the way I prefer to do it, except that I would probably use the jquery approach, personally:
这是我更喜欢的方式，除了我个人可能会使用 jquery 方法：
$(".one").css("color", "#000");
回答by George Cummins
CSS is used for styling markup elements (HTML, etc). You cannot apply CSS directly to Javascript variables.
CSS 用于样式化标记元素（HTML 等）。您不能将 CSS 直接应用于 Javascript 变量。
However, when you translate the variable contents into HTML, you can wrap your data in HTML tags and apply CSS styles to them.
但是，当您将变量内容转换为 HTML 时，您可以将数据包装在 HTML 标记中并将 CSS 样式应用于它们。
回答by Daniel
It depends how these variables are injected into the page, but you may want to wrap them in a span tag an see where you end up.
这取决于这些变量如何注入到页面中，但您可能希望将它们包装在一个 span 标签中，以查看最终的位置。
var usr = "<span class='user-input'>You: " + userinput + "</span>";
var rpl = "<span class='chatbot'>Chatbot: " + chatbot.transform(userinput) + "</span>";
use .user-input ans .chatbot in your CSS.
在你的 CSS 中使用 .user-input ans .chatbot 。
Another thing you could do is try to hunt down the html tag where your data is injected in the page through the source code. It is possible through javascript (jquery) to add class to a targeted html tag.
您可以做的另一件事是尝试查找通过源代码将数据注入页面的 html 标记。可以通过 javascript (jquery) 将类添加到目标 html 标签。
