Creating Pre-Made CSS Variables With JavaScript

Question

Let's say I'm working on a large page. I want to predefine some CSS styles as variables in JavaScript that I can use later. Is it possible? What would the syntax be?

I'm trying to do something like this:

var box = document.querySelector('.box'); 
var styleColor = style.color;
var red = "red"

box.onclick = function(){styleColor.red;}

I'm aware you can do it like this:

var box = document.querySelector('.box');

box.onclick = function(){box.style.color = "red";}

But I want to cache the CSS so It can be re-used later. Is this possible, if so what would the syntax look like?

Victory · Accepted Answer · 2014-04-04 08:49:24Z

1

Write your css in a normal css file. For instance:

.myRedClass { color: red; }

Then append a class to elements you want to be red in javascript as follows

var element = document.getElementById(elementId);
element.className += " " + "myRedClass";

answered Apr 4, 2014 at 8:49

Victory

5,9113 gold badges28 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Creating Pre-Made CSS Variables With JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related