Foros del Web - Ver Mensaje Individual

Tecna · #3 (**permalink**) 22/07/2010, 09:34

Buenas,

normalmente no es muy útil trabajar directamente sobre las hojas de estilos porque éstas suelen tener numerosas reglas y algunas pueden hacer referencia a la misma propiedad del mismo elemento con la misma o más profundidad en la declaración del selector, teniendo que determinar el valor computado con la prevalencia que dicta el orden en cascada de las propiedades, es decir que si queremos cambiar un elemento en concreto aunque lo pongamos al final de la hoja de estilos puede que el estilo no se aplique si hay anteriormente alguna regla con más peso especifico que modifique la misma propiedad de ese mismo selector, como por ejemplo querer modificar los enlaces usando el selector "a" si previamente se ha definido ese mismo estilo con "li a", que tendría más peso al definirse con 2 selectores y sería el que prevalecería. Además al incluir y borrar nuevas reglas puede que el orden de éstas dentro del array cssRules cambie y también su longitud con lo que aunque definamos las nuevas reglas siempre al final, habría que conocer previamente la propiedad length de cssRules. Por otro lado IE, no se en las últimas versiones, pero tenía sus propios métodos y cambiaba el nombre del array que guarda las reglas leídas de la hoja de estilos por lo que siempre nos dará más quebraderos de cabeza mantener la compatibilidad que si trabajamos directamente con la propiedad style del elemento que queramos cambiar.

La única ventaja que veo a trabajar con las hojas de estilo directamente es que así se puede tener acceso a los valores iniciales de las propiedades de cada elemento aunque éstas se hayan definido en hojas de estilos externas (que es lo más recomendable) o mediante el atributo style, que no ocurre con la propiedad style del objeto CSS2Properties en la que no están accesibles a no ser que se definan con la etiqueta <style> o con secuencias de comandos dentro del propio javascript. Con cssRules podemos tener un control completo sobre el orden de cascada y sobre todas las reglas que afectan a un determinado elemento, algo parecido a lo que hace firebug. Pero para modificar estilos concretos de elementos o grupos de elementos concretos es mucho mas eficaz la propiedad style de CSS2Properties. Y para obtener el valor computado que es el que realmente se aplica, si hay varias reglas por ejemplo, el metodo getComputed()

Los ficheros de las hojas de estilo en realidad no se modifican, lo que se modifica es el array cssRules donde se guardan las reglas del fichero css, debido a las restricciones de seguridad que tiene javascript en la parte del cliente que no permite leer ni mucho menos escribir o borrar archivos o directorios. Como bien dijo @Zerokilled, es cierto que sólo da ese error cuando es un recurso externo, pero no sólo pasa en firefox, o por lo menos a mi. Y creo que está bien que así sea porque si que se podría incluir código javascript dentro de una regla css y posteriormente ejecutarlo aunque seguirá teniendo las restricciones propias de javascript. He hecho un ejemplo.

Código Javascript:

Ver original// ejemplo para incluir codigo javascript dentro de una regla css creada con insertRule
// By Tecna
 
function init()
{
    var reglas = document.styleSheets[0].cssRules;
    var css = document.getElementById('css');
    var js = document.getElementById('js');
    css.onclick = function () {nuevoCSS(reglas, css, js);};
    js.onclick = function () {nuevoJS(reglas);};    
}
 
 
window.onload = init;
 
function nuevoCSS(reglas, css, js)
{
    document.styleSheets[0].insertRule ('#css {content: \"alert(\'alert insertado como propiedad content en fichero css\')\"; background: #f0f;}', 1);
    alert('nueva regla para el selector #css con codigo js incluido: ' + reglas[1].cssText);
    js.style.visibility = 'visible';
}
 
function nuevoJS(reglas)
{
    var scriptI = document.createElement('script');
    scriptI.innerHTML = reglas[1].cssText.split('"')[1];
    document.body.appendChild(scriptI);
}

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Incluir propiedad en hoja de estilos con javascript incluido</title>
    <link rel="stylesheet" href="fichero.css" type="text/css">
    <script type="text/javascript" src="fichero.js"></script>
</head>
<body>
    <a href="#" id="css">incluir css con js</a>
    <a href="#" id="js">ejecutar js del css</a>
    <script>document.getElementById('js').style.visibility = 'hidden';</script>
</body>
</html>

Código CSS:

Ver originala {
    display: block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    background: #ff0;
    float: left;
    margin: 20px;
    text-align: center;
}