Creating a css class with a Javascript object or var [duplicate]

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 - developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Caniuse: caniuse.com/#search=variables (IE as usual not work) — Luís P. A.
– Luís P. A., Commented Apr 28, 2017 at 9:11
Check out some of the CSS preprocessers like SCSS. Using JavaScript will be difficult to maintain. — user2182349
– user2182349, Commented Apr 28, 2017 at 9: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
– Mike Young, Commented Apr 28, 2017 at 9:51

Bob · Accepted Answer · 2017-04-28 09:37:09Z

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, 2017 at 9:37

Bob

1,67519 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike Young Over a year ago

Perfect thank you!

Bob Over a year ago

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.

Mike Young Over a year ago

thanks, yeh I just had a look. It's strange that I didn't find that when I was searching for this!

Bill Gilmore · Accepted Answer · 2017-04-28 09:36:07Z

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>

Kung Fu Panda · Accepted Answer · 2017-04-28 09:45:03Z

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, 2017 at 9:45

Kung Fu Panda

64610 silver badges22 bronze badges

1 Comment

Mike Young Over a year ago

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

Collectives™ on Stack Overflow

Creating a css class with a Javascript object or var [duplicate]

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Related