切换属性选择器CSS javascript

Question

I want to toggle "fill: #000;" from the CSS property "svg [id^='_']".

Normally I'd use something like this, but I can't use this because "svg [id^='_']" isn't an element, right?

pub.toggleClass = function(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);

    el.className = classes.join(' ');
  }
};

When I try toggleClass it says "Uncaught TypeError: Cannot read property 'split' of undefined"...

I've tried doing something like this: document.styleSheets[1].addRule("svg [id^='_']", 'fill: #000;'); but it isn't working cross-browser and it's not toggling... I say this because I get the feeling there is a simpler way to do this..

Update 1

I'm going to try this library: https://github.com/Box9/jss

Answer 1

I was able to use toggleClass by putting the attribute selector in the class I was adding. Rather than try to add the style onto the existing attribute selection, this was a lot simpler.

.monotone [id^='_'] {
    fill: #000;
}