Posted By

agarcim on 02/20/13

Tagged

Versions (?)

Last Edited at 02/20/13 07:01pm

Statistics

Viewed 654 times

Favorited by 0 user(s)

Related snippets

Get, add y remove CSS rules

/ Published in: JavaScript

Functions to add, get y remove CSS rules

Highlighted TextExpand

function getCSSRule(ruleName, deleteFlag) {
  if (document.styleSheets) {
    for (var i=0; i<document.styleSheets.length; i++) {
      var styleSheet=document.styleSheets[i];
      var ii=0;
      var cssRule=false;
      do {
        if (styleSheet.cssRules) {
          cssRule = styleSheet.cssRules[ii];
        } else {
          cssRule = styleSheet.rules[ii];
        }
        if (cssRule)  {
          if (cssRule.selectorText==ruleName) {
            if (deleteFlag=='delete') {
              if (styleSheet.cssRules) {
                styleSheet.deleteRule(ii);
              } else {
                styleSheet.removeRule(ii);
              }
              return true;
            } else {
              return cssRule;
            }
          }
        }
        ii++;
      } while (cssRule)
    }
  }
  return false;
}

function killCSSRule(ruleName) {
  return getCSSRule(ruleName,'delete');
}

function addCSSRule(ruleName) {
  if (document.styleSheets) {
    if (!getCSSRule(ruleName)) {
      if (document.styleSheets[0].addRule) {
        document.styleSheets[0].addRule(ruleName, null,0);
      } else {
        document.styleSheets[0].insertRule(ruleName+' { }', 0);
      }
    }
  }
  return getCSSRule(ruleName);
}
Uso: 
// devuelve el objeto para la clase "fancyStyle"
fancyStyleObject=getCSSRule('fancyStyle');
// aplica la propiedad underline a la decoraciÃƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â³n del texto del objeto anterior
fancyStyleObject.style.textDecoration='underline'

// Elimina la clase "fancyStyle" eliminado los estilos aplicados al objeto.
killCSSRule('fancyStyle');

// Crea un nueva regla stylesheet para los parrafos.
newStyle=addCSSRule('p');
// Cambia todos los parrafos anteriores al color azul.
newStyle.style.color='blue';

// Creamos una nueva CSS class llamada fancyStyle.
newStyle=addCSSRule('.fancyStyle');
// Aplicamos un fondo verde a todos los elementos con la clase fancyStyle.
newStyle.backgroundColor='green';

URL: http://www.anieto2k.com/2007/03/09/10-utilidades-javascript-que-deberias-conocer/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.