Create CSS styling properties using JavaScript [closed]

Question

Like everyone knows we can style an element using CSS like below

  #a {
     background-color : green;
  }

And using JS

  document.getElementById('a').style.backgroundColor = "green";

But I would like to create some property like background-color and that can be used inside CSS. For example I will create a property like "foobar" then I should be able to use it like below

  #a {
     foobar : value;
  }

Is this possible? I would like to execute some JS on the element that includes this property.

Answers in the question referred to as a duplicate were how to create new CSS and add it to the style sheets using existing CSS properties. But here I am trying to create my own css property...

Answer 1

I would like to execute some JS on the element that includes this property.

Although you could just write random properties to the style object:

myElement.style.foobar = "value";

...and that seems to survive on Chrome, Firefox, IE11, even IE8, I would strongly recommend against it.

You'd be much better off using a class or a data-* attribute instead. You can query for them, for one thing.

If you're trying to create your own CSS (something you said in a comment), I would think a data-* attribute would be a good choice.

Using a class:

var myElement = document.createElement('a');
myElement.className = "foobar";
// ...add it somewhere...

// Later
var myElements = document.querySelectorAll(".foobar");
// ...do something with the list...

or with a data-* attribute:

var myElement = document.createElement('a');
myElement.setAttribute("data-foobar", "value");
// ...add it somewhere...

// Later
var myElements = document.querySelectorAll('[data-foobar="value"]');
// ...do something with the list...

---

querySelectorAll is supported on all modern browsers, and also IE8.

Answer 2

You cannot implement such thing in javascript, while something like you can do in SASS and Less.You have to define a variable with the property e.g. @myblackcolor:#000000;.So this @myblackcolor u can use anywhere in ur css instead of writing again and again color:#ffff.

Answer 3

Why don't you define your classes in your stylesheet and assign them dynamically to newly created elements via JavaScript based on some conditions? That way you wouldn't need any DOM traversal. E.g.:

/* in your stylesheet */
.classOne{
    font-weight: bold;
    background-color: #808080;
}

.classTwo{
    width: 100%;
    background-color: #000000;
}


//then in your JavaScript
var elt = document.createElement("button");
if(condition a){
    elt.className = "classOne";
    //other scripts related to elt given class name is classOne
}else if(condition b){
    elt.className = "classTwo";
    //other scripts related to elt given class name is classTwo
}