Create CSS styling properties using JavaScript

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...

Possible duplicate: http://stackoverflow.com/questions/24885300/how-can-i-add-my-own-style-property-and-values — Bhojendra Rauniyar, Jan 12 '15 at 07:32
Why do you want to do this? There is probably a better (more standard) way to achieve your goal. — snooze92, Jan 12 '15 at 07:32
Are you trying to create a string containing the `css` rules and append it to `DOM` using javascript? — Catalin, Jan 12 '15 at 07:33
I don't know what is your end-goal. What are you trying to do, ultimately? — snooze92, Jan 12 '15 at 07:33
The first result from a google search: http://davidwalsh.name/add-rules-stylesheets — EternalHour, Jan 12 '15 at 07:34
possible duplicate of [Changing CSS Values with Javascript](http://stackoverflow.com/questions/566203/changing-css-values-with-javascript) — meskobalazs, Jan 12 '15 at 07:34
@JosephtheDreamer Please have a look at the edited question at the end. I know the same can be implemented using class name but would like to proceed this way due to several reasons. Learning is one of the reasons :) — redV, Jan 12 '15 at 07:36
You can do the CSS you've shown; of course, it has exactly no effect. Similarly, you could assign to `yourElement.style.foobar = "value";`, but it would also have no effect. Please explain what you expect `foobar` to do. — T.J. Crowder, Jan 12 '15 at 07:36
@T.J.Crowder I would like to execute some JS on elements that includes the CSS property. This can be achieved using class names but would like to do it using CSS way. — redV, Jan 12 '15 at 07:37

T.J. Crowder · Accepted Answer · 2015-01-12T07:42:38.337

3

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.

edited Jan 12 '15 at 07:42

answered Jan 12 '15 at 07:37

T.J. Crowder

1,031,962
187
1,923
1,875

Hmmm, yeah this is traditional approach. I agree but we will end up always traversing DOM for new elements when we have elements being added dynamically.. – redV Jan 12 '15 at 07:39
@redV: Two responses to that: :-) A) Why would you traverse the DOM when adding new elements? And B) You'd have to do that anyway. Using a `data-*` or class means you can have the browser's selector engine do it (read: faster), whereas putting it on the `style` attribute doesn't. – T.J. Crowder Jan 12 '15 at 07:43
For example I added an element which has a class with CSS defined with one of the CSS properties I included manually. Whenever it is added I need to watch DOM for change and add JS on element which contains my CSS property. But I am looking for an inbuilt way that will be triggered whenever an element is added with the class which contains that property. – redV Jan 12 '15 at 07:46
@redV: On modern browsers, you could use [mutation observers](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) to do that. On some slightly older ones, the deprecated [mutation events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) (and if you search, I remember seeing a polyfill that provided `MutationObserver` on older browsers using mutation events to implement it). Other than that, I don't think you have a lot of options. – T.J. Crowder Jan 12 '15 at 08:18

score 0 · Answer 2 · answered Jan 12 '15 at 07:36

0

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.

answered Jan 12 '15 at 07:36

TechieViking

126
1
10

saas and less both are compiled back to CSS and they are nothing to do with the above requirement AFAIK. Because in LESS and SAAS you are abstracting the complexity of writing CSS but here I am trying to create own implementation for CSS – redV Jan 12 '15 at 07:38
Then you can do something like if u r doing it in pure javascript var element= document.createElement('a'); element.setAttribute("dom-element", "value"); – TechieViking Jan 12 '15 at 07:42
Please refer to my comments under TJ. Crowder answer. – redV Jan 12 '15 at 07:47
Ohh! He also said the same thing. Enjoy if u got any help. If not find alternate bro.Why u want to make it complex when easy ways are out there to do it. – TechieViking Jan 12 '15 at 07:50

score 0 · Answer 3 · answered Jan 12 '15 at 09:49

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
}

Create CSS styling properties using JavaScript

3 Answers3

Linked

Related