How do I add my own line into a CSS snippet

Question

How could I add a new rule to this CSS stylesheet?

.tag {
  background: #333333;
  border-radius: 3px;
  color: #ffffff;
  font: 10px "Gibson-Regular", sans-serif;
  letter-spacing: 1px;
  margin-right: 1px;
  padding: 2px 3px 2px 4px;
  position: relative;
  top: -1px;
  text-transform: uppercase; 
}

.tag a {
  color: #ffffff;
  text-decoration: none !important; 
}

// already in the code
.tag.yolo {
  background-color: #0066CC; 
}

// I want this to be added
.tag.yolo {
  background-color: #0066CC; 
}

I'd prefer to do this with only Javascript

.tag.yolo {
  background-color: #0066CC; 
}

i just looked at that... to me it looks like it only creates an inline object... i want to create .tag.yolo { not add a color or manage the weight. — user3289948, Feb 09 '14 at 22:16
@user3289948 Nope, that's about as basic as it gets. Try reading the API for the commands in the linked answer if you are confused by them — Zach Saucier, Feb 09 '14 at 22:17

Alexandre Marcondes · Answer 1 · 2014-02-09T23:39:18.560

0

Using the API cited on the question commented above, you could do it like this:

var all = document.styleSheets,
    s = all[all.length - 1],
    l = s.cssRules.length;

if (s.insertRule) {
    s.insertRule('.tag.yolo { background-color: #0066CC; }', l);
} else {
    //IE
    s.addRule('.tag.yolo { background-color: #0066CC; }', -1);
}

Or this approach:

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".tag.yolo { background-color: #0066CC; }";
document.body.appendChild(css);

edited Feb 09 '14 at 23:39

answered Feb 09 '14 at 22:23

Alexandre Marcondes

5,859
2
25
31

just tested it, it doesn't work – user3289948 Feb 09 '14 at 22:26
@user3289948 try this other approach – Alexandre Marcondes Feb 10 '14 at 00:45

How do I add my own line into a CSS snippet

1 Answers1