Advanced Search

Get, add y remove CSS rules

/ Published in: JavaScript
Save to your folder(s)
Functions to add, get y remove CSS rules

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function getCSSRule(ruleName, deleteFlag) {
  2.   if (document.styleSheets) {
  3.     for (var i=0; i<document.styleSheets.length; i++) {
  4.       var styleSheet=document.styleSheets[i];
  5.       var ii=0;
  6.       var cssRule=false;
  7.       do {
  8.         if (styleSheet.cssRules) {
  9.           cssRule = styleSheet.cssRules[ii];
  10.         } else {
  11.           cssRule = styleSheet.rules[ii];
  12.         }
  13.         if (cssRule)  {
  14.           if (cssRule.selectorText==ruleName) {
  15.             if (deleteFlag=='delete') {
  16.               if (styleSheet.cssRules) {
  17.                 styleSheet.deleteRule(ii);
  18.               } else {
  19.                 styleSheet.removeRule(ii);
  20.               }
  21.               return true;
  22.             } else {
  23.               return cssRule;
  24.             }
  25.           }
  26.         }
  27.         ii++;
  28.       } while (cssRule)
  29.     }
  30.   }
  31.   return false;
  32. }
  33.  
  34. function killCSSRule(ruleName) {
  35.   return getCSSRule(ruleName,'delete');
  36. }
  37.  
  38. function addCSSRule(ruleName) {
  39.   if (document.styleSheets) {
  40.     if (!getCSSRule(ruleName)) {
  41.       if (document.styleSheets[0].addRule) {
  42.         document.styleSheets[0].addRule(ruleName, null,0);
  43.       } else {
  44.         document.styleSheets[0].insertRule(ruleName+' { }', 0);
  45.       }
  46.     }
  47.   }
  48.   return getCSSRule(ruleName);
  49. }
  50. Uso: 
  51. // devuelve el objeto para la clase "fancyStyle"
  52. fancyStyleObject=getCSSRule('fancyStyle');
  53. // aplica la propiedad underline a la decoraci���³n del texto del objeto anterior
  54. fancyStyleObject.style.textDecoration='underline'
  55.  
  56. // Elimina la clase "fancyStyle" eliminado los estilos aplicados al objeto.
  57. killCSSRule('fancyStyle');
  58.  
  59. // Crea un nueva regla stylesheet para los parrafos.
  60. newStyle=addCSSRule('p');
  61. // Cambia todos los parrafos anteriores al color azul.
  62. newStyle.style.color='blue';
  63.  
  64. // Creamos una nueva CSS class llamada fancyStyle.
  65. newStyle=addCSSRule('.fancyStyle');
  66. // Aplicamos un fondo verde a todos los elementos con la clase fancyStyle.
  67. newStyle.backgroundColor='green';

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.