Override/Delete CSS property with JavaScript

Question

I am writing a small plugin that lets the user easily add transitions in javascript without jquery:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Snippety</title>
<script src="snip.js" type="text/javascript"></script>
<link rel="stylesheet" href="snip.css" type="text/css" />
</head>

<body>

<script>
transition(
transSelector = '.snip',
transTime = '5s',
transDelay = 0000,
transFunc = 'transTo("background-color:red!important;")'
);
</script>

<div class="snip" id="snip">buhhug</div>

</body>
</html>

Js Plugin:

function transition(transSelector,transTime,transDelay,transFunc) {
document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}');
setTimeout(transFunc, transDelay)
}

function transTo(rule) {
    document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}');
}

CSS:

.snip {
background-color: green;
}

The problem is that, when the color is changed to red in javascript, I need to add !important to change .snip tobackground-color:red;, but it only works once. Is there any way to delete the background-color:green; in the css stylesheet, or override without having to put the !important in it? (I aim to change the color more than once).

I have tried .addRule instead of .insertRule, but I think I am barking up the wrong tree.

I'm surprised it needs important - I thought javascript put styles inline and that inline styles overwrote any other css styles, !important or otherwise — wunth, May 09 '15 at 04:07
It only works when I put !important, It just stays green otherwise — ScriptKitty, May 09 '15 at 04:09
Does it make a difference if you make the transSelector='#snip' — wunth, May 09 '15 at 04:20
Yes, it works, but I want it to be applied only to the class. — ScriptKitty, May 09 '15 at 04:26

score 2 · Accepted Answer · edited May 23 '17 at 10:26

insertRule has a second param that indicates where you want to insert the rule. If that param is 0, then it inserts it into the top of the stylesheet. Which would put it before all other rules, which would mean the original rule is actually coming after the first. Try document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}', 1);.

See https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule.

EDIT to answer second question:

This probably belongs as a different question, but I'll try and help you out. I'm sure this is just a subset of your code so it's hard to know exactly what you are looking to do here. But here are a couple of issues.

The first is that you are calling the transition function and supplying variable names as well as values. In some languages, you can use "named parameters" like that, but in JS it doesn't do what you want it to do. What you are actually doing is creating a global variable called transSelector, then setting it to '.snip'. Same for the rest of the variables. Those values do get passed along to the transition function. Then, you call transition again, but now you are overwriting the same globals with new values. By the time transTo is called, transSelector doesn't mean what it used to mean, and it gets all messed up. Get rid of the global variables and only pass the values.

That causes a different problem, which is that transTo doesn't know what transSelector is anymore since it isn't a global. Also, there is potential for abuse because you are passing a string to setTimeout which is just another form of eval(). Instead, you can just turn that into an anonymous function, and the same parameters will be available to it.

So the new plugin would look like this:

function transition(transSelector,transTime,transDelay,transRule) {
  document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}', 1);
  setTimeout(function () {
    document.styleSheets[0].insertRule(''+transSelector+' {'+transRule+'}', 1);
  }, transDelay)
}

And you would call it like this:

transition('.snip', '5s', 0000, 'background-color:red !important;');

If you need more help with the plugin, I would suggest creating a separate question, as that will likely need to be more in-depth than we want to get editing a question about insertRule.

How can I get it to work for multiple elements, if I try duplicating the transition function, and setting it to a different element, it only loads the first transition. — ScriptKitty, May 09 '15 at 04:43
I think there may be another problem in that script; you aren't passing `transSelector` into the second function, so it is probably treating it as a global variable. You probably need to pass `transSelector` into your `transTo` function. — mherzig, May 09 '15 at 04:46
Great @mherzig , but is there any way `transSelector` does not have to be used in the `transTo` function (I only want `transSelector` to be used once), preferably from the `transition` function only. — ScriptKitty, May 09 '15 at 04:58

Override/Delete CSS property with JavaScript

1 Answers1