ansaurus

Question

Alter CSS class attributes with javascript?

Answer 1

+2 A:

I think this is what you want:

<script>
var style;
function changeFoo(left, top) {
    if(typeof style == 'undefined') {
        var append = true;
        style = document.createElement('style');
    } else {
        while (style.hasChildNodes()) {
            style.removeChild(style.firstChild);
        }
    }
    var head = document.getElementsByTagName('head')[0];
    var rules = document.createTextNode(
        '.Foo { left: ' + left + 'px; top: ' + top + 'px; }'
    );

    style.type = 'text/css';
    if(style.styleSheet) {
        style.styleSheet.cssText = rules.nodeValue;
    } else {
        style.appendChild(rules);
    }
    if(append === true) head.appendChild(style);
}
</script>

This code was modified from an answer provided in this question which is very similar to what you asked. Whenever you need to change the position of all .Foo elements, you can just call changeFoo(newLeftValue, newTopValue); - the first time around it will create the <style> element and add it to the <head> of the document. Subsequent calls will just empty the <style> element that was already added and add the new rule.

Paolo Bergantino 2009-02-24 02:20:23

I think this will work, but the drawback is if Foo changes frequently, say, 100 times - there'll be 100 definitions for Foo on the page (with the cascading effect causing the latest one to take effect). I don't see that being good for performance.

Mike 2009-02-24 02:35:12

Answer 2

A:

function changecss(theClass,element,value) {
//Last Updated on May 21, 2008
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
 var cssRules;
 if (document.all) {
  cssRules = 'rules';
 }
 else if (document.getElementById) {
  cssRules = 'cssRules';
 }
 var added = false;
 for (var S = 0; S < document.styleSheets.length; S++){
  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
    if(document.styleSheets[S][cssRules][R].style[element]){
    document.styleSheets[S][cssRules][R].style[element] = value;
    added=true;
 break;
    }
   }
  }

  if(!added){
  if(document.styleSheets[S].insertRule){
    document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+';

}',document.styleSheets[S][cssRules].length); } else if (document.styleSheets[S].addRule) { document.styleSheets[S].addRule(theClass,element+': '+value+';'); } } } }

Javatron 2009-06-06 05:48:59

ansaurus

tags:

views:

answers:

Alter CSS class attributes with javascript?

related questions