Creating a css class with a Javascript object or var

Question

Is it possible to create a css class based on a javascript object or variable?

An example would be if you had an input where you can enter a hex code. I can extract the value using javascript and set it to a var.

I can then use this var to set inline styles with javascript thus changing the color of text on the page. However is there a way I could use this var and create a css class? Rather than go through all the elements of the page and set the color, I'd rather add a class on one element of the page that then have the styles nested within that class to cascade to other elements.

Use css Variables - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Caniuse: https://caniuse.com/#search=variables (IE as usual not work) — Luís P. A., Apr 28 '17 at 09:11
Check out some of the CSS preprocessers like SCSS. Using JavaScript will be difficult to maintain. — user2182349, Apr 28 '17 at 09:25
@user2182349 I am using SCSS. The problem is how can you set the var in SCSS to the JS variable, I don't think that is possible is it? — Mike Young, Apr 28 '17 at 09:51

score 2 · Accepted Answer · answered Apr 28 '17 at 09:37

2

Lots of ways to dynamically alter css styling after page load. If you want to make a change that is applied as if it was a normal css script you can add a style tag to the header via javascript. eg.

var color = "blue" ; // from your input
var element  = document.createElement("style");
element.id = "myStyleId" ; // so you can get and alter/replace/remove later
element.innerHTML = ".myClass {color:" + color + ";}" ; // css rule
var header = document.getElementsByTagName("HEAD")[0] ;
header.appendChild(element) ;

answered Apr 28 '17 at 09:37

Bob

1,589
17
25

Perfect thank you! – Mike Young Apr 28 '17 at 09:43
You're welcome...though must acknowledge Abhishek Pandey above (your first commenter) - just after posting I checked the link provided and the answer there is almost identical. – Bob Apr 28 '17 at 09:50
thanks, yeh I just had a look. It's strange that I didn't find that when I was searching for this! – Mike Young Apr 28 '17 at 10:05

Bill Gilmore · Answer 2 · 2017-04-28T09:36:07.690

Something like this buddy? https://jsfiddle.net/BillyG83/hcek46a1/2/

made just for you, happy Friday

here is the code

<!DOCTYPE html>
<html>
    <head>
        <title>Test HTML</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="textBox"/>
        <input type="button" id="submit" value="Go"/>
    </body>
    <script type="text/javascript">
    $("#submit").click(function(){
        var textBoxValue = $("#textBox").val();
        if (textBoxValue.length == 0) {
            alert("you didnt enter a value");
        } else if (textBoxValue.length < 6) {
            alert("you only entered " + textBoxValue.length + " chacters, a HEX code needs 6");
        } else if (textBoxValue.length == 6) {
            var newHEXcode = "#" + textBoxValue;
            alert("new HEX code = " + newHEXcode)
        } else {
            alert("you only entered " + textBoxValue.length + " chacters, thats too many, a HEX code needs 6");
        }
    });
</script>
</html>

score 0 · Answer 3 · answered Apr 28 '17 at 09:45

0

In this example if you enter hex value like FFFF00 or 800000 or FF0000 then it will change the background css of the text Hello Pratik Ghag!.

$("#txtInput").change(function(){
  var color = "#"+$("#txtInput").val();
  $(".spnMessage").css("background",color);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Enter hex color code:</p>
<input id="txtInput" /><br>

<span class="spnMessage">Hello Pratik Ghag!</span>

answered Apr 28 '17 at 09:45

Kung Fu Panda

636
10
22

This is what I am doing already. The question was using the var from the input to create a css class rather than an inline style as inline styles can only apply styles to it's own element and not cascade – Mike Young Apr 28 '17 at 10:03

Creating a css class with a Javascript object or var

3 Answers3

Linked