Get, add y remove CSS rules


/ Published in: JavaScript
Save to your folder(s)

Functions to add, get y remove CSS rules


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.