How can I manipulate css into a SVG

Question

i'm trying to improve my code by assigning the css for properly:

isChecked = jqElement.is(':checked');
type = jqElement.attr('tag');
var start = new Date().getTime();
elements = document.getElementsByClassName(type);
console.log('LAYER ' + type + ': ' + elements.length);
for (j=0; j<elements.length; j++){
    element = elements[j];
if (isChecked)
    element.classList.remove('hide-layer');
else
    element.classList.add('hide-layer');
//element.className += ' hide-layer';
//element.className = type;
//element.setAttribute('visibility', (isChecked)? '' : 'hidden');
}

Using element.className += ' hide-layer' doesn't work Using element.className += ' hide-layer' takes a while (8 secons for 1996 path elements with the same class)

the css class is like:

.hide-layer{
    visibility:hidden;
}

Hope you can help me. Thanks in advance!

Answer 1

If you set a class on the elements you wanted to hide you could manipulate the class rule ie edit

.hide-layer{
    visibility:hidden;
}

to become

.hide-layer{
    visibility:visible;
}

You can access stylesheets via

document.styleSheets

If the above rule was the only rule in the only stylesheet for the page it would be

var rule = document.styleSheets[0].cssRules[0]

and

document.styleSheets[0].cssRules[0].style.setProperty('visibility','visible',null);

would update the visibility property in the rule.