Codiguillos de JavierB

Leer hoja de estilos externa

Si tenemos el siguiente código

<p id="algo" style="font-size:1em">

Podemos saber el tamaño de la fuente utilizando document.getElementById('algo').style.fontSize. Pero si tenemos definidos los estilos en la sección <head> de la página o en un archivo externo:

<style type="text/css">
body {color:green}
p {font-size:1em}
.pepe {background: yellow; border: 1px solid red; color:silver}
</style>

cuando utilicemos document.getElementById('algo').style.fontSize nos devolverá una horrorosa cadena vacía. Así que tendremos que utilizar otro método. Para ver un ejemplo en funcionamiento podeis pulsar los botones A+ y A- en la parte superior de esta página

Empezaremos por conseguir un Array con todas las reglas que tenemos definidas. Como es habitual, no es igual en todos los navegadores:

if (document.all) // Internet Explorer
  miRegla = document.styleSheets[0].rules;
else
  miRegla = document.styleSheets[0].cssRules;

En este caso hemos utilizado styleSheets[0] porque solo hay una hoja externa. Se puede averiguar cuantos archivos externos tenemos con document.styleSheets.length. Si utilizamos miRegla.length sabremos cuantas definiciones tenemos, en este ejemplo son 3. También podemos saber cual es el segundo selector (p) con miRegla[1].selectorText. Aquí vuelve a haber una diferencia, porque IE devuelve las etiquetas HTML en mayúscula y Firefox en minúscula, pero para eso tenemos las funciones toLowerCase() y toUpperCase().

Ahora con todo esto que hemos visto vamos a crear una función que devuelva la propiedad color del selector .pepe. Recorreremos todos los selectores hasta encontrar el que buscamos y luego leeremos la propiedad que nos interesa. Llamaremos a la función con colo=buscarPropiedad('.pepe','color')

function buscarPropiedad(selector,propi) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++)
    if (reg.selectorText.toLowerCase() == selector.toLowerCase() )
      return reg.style[propi];
}

Todo esto puede estar bastante bien, pero seguro que más de uno estareis pensando si se podría cambiar una propiedad, por ejemplo cambiar el color de todos los párrafos que tengan la clase "pepe". Pues si se puede, con una función muy parecida a la anterior, que llamaremos con cambiarPropiedad('.pepe','color','red')

function cambiarPropiedad(regla,propi,valor) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++)
    if (reg.selectorText.toLowerCase() == regla.toLowerCase() )
      reg.style[propi]=valor;
}

También podemos vernos en la necesidad de añadir o borrar reglas. La diferencias entre navegadores vuelven, una vez más, a complicarnos la vida, ya que Firefox utiliza insertRule, pasandole como parámetos la regla completa (span {color: red}), y la posición donde queremos que se inserte y deleteRule, Internet Explorer usa addRule pasandole el selector(span), la propiedad (color: red) y la posición, y removeRule

Bueno, creo que lo mejor es que veais el código de un par de funciones, una para añadir reglas a la que llamaremos con anadir('span', 'color:red')

function anadir(selector,regla) {
  if (document.all)
    document.styleSheets[0].addRule(selector,regla,-1); // IE
  else
    document.styleSheets[0].insertRule(selector+ '{'+regla+'}',document.styleSheets[0].length); // FF  
}

Y la otra función es, como ya habreis adivinado, para borrar una regla. La función hace un bucle para que encuentre la posición adecuada y borrarla. A esta función la llamaremos de esta forma: borrar('span')

function borrar(regla) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++)
    if (reg.selectorText.toLowerCase() == regla.toLowerCase() )
      if (document.all)
        document.styleSheets[0].removeRule(i); // IE
      else
        document.styleSheets[0].deleteRule(i); // FF
 
}

En este caso hubiera sido suficiente con poner la posición que ocupa la regla: document.styleSheets[0].deleteRule(2); pero me ha parecido más útil hacer esta función, así aunque cambiemos el archivo .css (añadiendo o borrando reglas) seguirá funcionando sin problemas.

Para finalizar voy a poner el código que se utiliza en esta misma página para aumentar o disminuir el tamaño del texto. Hay que pasarle el valor que queremos aumentar/disminuir:

function cambiarTamano(tam) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++) {
    size = reg.style.fontSize;
    if (size!='') {
      size=parseFloat(size)+tam+'em';
      reg.style.fontSize=size;
    }
  }
}

Subir Subir