![Apply Css Class to Javascript Variable? [Closed]](https://docuprint.cloud68.co/uploads/apply-css-class-to-javascript-variable-closed_1200.jpg)
Does anyone know how I can apply a CSS class to a JavaScript variable?
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.
I need each variable to have a different CSS class applied to it.
Can anybody help?
3 Answers
You can't assign a CSS class to a javascript variable.
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.
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".
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:
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 using javascript/jquery. One example is below:
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 = "";
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: ):
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:
$(".one").css("color", "#000");
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.
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.
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.
CSS is used for styling markup elements (HTML, etc). You cannot apply CSS directly to Javascript variables.
However, when you translate the variable contents into HTML, you can wrap your data in HTML tags and apply CSS styles to them.
