Misterio de la lectura CSS

salbatore · #1 (**permalink**) 07/02/2011, 08:47

Hola a todos,

Llevare 3 años con el javascript dandole por todos lados. El caso es que hoy, ahora que se mas que hace 2 años... me topo con un misterio que siempre he conocido... y que como buen programador eficiente he resuelto con parches y demas.

El caso es que de hoy no pasa y me he puesto a buscar info pero no he encontrado, la verdad es que es dificil de buscar en google, me he topado con gente preguntando pero sin respuestas. Asi que pregunto.

¿Por que no puedo saber el color de Wally en este ejemplo?... y... como lo puedo resolver?... si os fijais en Snoopy si funciona ya que el stylo esta en su etiqueta... si lo pongo entre los <style> o en una hoja css no los lee.

Ejemplo ultratonto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Misterio del css</title>
<style>
    #wally{ display:inherit; background:red; margin:10px; padding:10px;}
</style>
</head>
 
<body>
    Si clicas en el boton "uno" no sale nada... En cambio si clicas en "dos" si... ¿cuál es la razón?
    <div id="wally">¿Dónde estoy?</div>
    <div id="snoopy"  style="display:inherit; margin:10px; background:red; padding:10px;">¿Dónde estoy?</div>
    <input id="uno" type="button"  value="qué fondo tiene wally?" onclick="alert(document.getElementById('wally').style.background);" />
    <input id="dos" type="button"  value="qué fondo tiene snoopy?" onclick="alert(document.getElementById('snoopy').style.background);" />
</body>
</html>

La verdad es que mira que tengo funciones para ocultar bloques en JS... primero pregunto el display='none'... pero mira que siempre acabo escribiendolo en la misma etiqueta... asi que... como lo soluciono?

EDITO: mirar que igual tengo suerte y son un paquete de narices... y llevo haciendolo mal 3 años seguidos... es mas que posible.

SergeMedina · #2 (**permalink**) 07/02/2011, 08:55

El problema es que style solo lee el estilo que ha sido seteado por javascript o el estilo en linea del elemento.

Lo que necesitas es saber el "computed style" del elemento.

Saludos

salbatore · #3 (**permalink**) 07/02/2011, 09:01

Hola SergeMedina... que rapido...

He encontrado esta funcion... pensaba que no funcionaba... pero la estaba implementando mal... tenia que poner background-colo en vez de background... con esta funcion puedo saber el valor de un elemento al cargar la web con estilos en una hoja.

Código HTML:

Ver originalfunction getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

Ahora miro tu link y te digo.

_cronos2 · #4 (**permalink**) 07/02/2011, 09:10

JavierB tiene unas funciones para eso, yo las recopilé todas en un objeto, mira a ver si te sirve:

Código Javascript:

Ver originalString.prototype.low=function(){ return this.toLowerCase(); };
var extSS = function(){};
extSS.prototype = {
 isIE : document.all,
 instrucciones : {
  'reglas' : this.isIE ? 'rules' : 'cssRules',
  'add' : (this.isIE ? 'add' : 'insert') + 'Rule',
  'remove' : (this.isIE ? 'remove' : 'delete') + 'Rule'
 },
 hojas : document.styleSheets,
 getSS : function(id){
  var cosa;
  switch(typeof id){
   case 'number' :
    return this.hojas[id] ? this.hojas[id] : false;
   break;
   case 'string' :
    for(var url = /(file|http):\/\/(\/*).+\//, i=0; cosa = this.hojas[i]; i++){
     if(cosa.href == id || cosa.href.replace(url, '') == id || cosa.href.replace(url, '').replace(/\.css$/, '') == id)
      return cosa;
    }
   break;
  }
  return false;
 },
 find : function(select, propi){
  var estilo;
  for(i=0; sheet = this.hojas[i]; i++){  
   estilo = sheet[this.instrucciones['reglas']];
   for(j=0; regla = estilo[j]; j++){
    if(regla.selectorText.low() == select.low() && regla.style[propi])
     return regla.style[propi];
   }
  }
  return false;
 },
 set : function(select, propi, val){
  var estilo;
  for(i=0; sheet = this.hojas[i]; i++){  
   estilo = sheet[this.instrucciones['reglas']];
   for(j=0; regla = estilo[j]; j++){
    if(regla.selectorText.low() == select.low() && regla.style[propi])
     regla.style[propi] = val;
   }
  }
  return false;
 },
 add : function(hoja, select, propi, val){
  var SS = this.getSS(hoja);
  try{
   SS.insertRule(select + '{' + propi + ':' + val + '}', SS[this.instrucciones['reglas']].length);
  }catch(e){ // IE
   SS.addRule(select, propi + ':' + val);
  }
 }, 
 remove : function(hoja, select){
  var estilo;
  switch(typeof hoja){
   case 'number' :
    estilo = this.hojas[hoja][this.instrucciones['reglas']];
    for(i=0; regla = estilo[i]; i++){
     if(regla.selectorText.low() == select.low())
      this.getSS(hoja)[this.instrucciones['remove']](j);
    }
   break;   
   case 'string' :
    if(hoja=='all'){
     for(i=0; sheet = this.hojas[i]; i++){
      estilo = sheet[this.instrucciones['reglas']];
      for(j=0; regla = estilo[j]; j++){
       if(regla.selectorText.low() == select.low())
        sheet[this.instrucciones['remove']](j);
      }
     }
    }else{
     var SS = this.getSS(hoja), estilo = SS[this.instrucciones['reglas']];
     for(i = 0; regla = estilo[i]; i++){
      if(regla.selectorText.low() == select.low())
       SS[this.instrucciones['remove']](i)
     }
    }
   break;
  }
 }
};
var SS = new extSS();

Esto busca por las StyleSheets del documento, así que no te servirá para saber por ejemplo el tamaño de fuente de un párrafo sin ningún estilo (para se usa getComputedStyle() creo), pero si lo tienes definido en algún sitio sí.
Saludos (:

salbatore · #5 (**permalink**) 07/02/2011, 09:17

Hola,

Muchas gracias por la ayuda... con lo que me comentais estoy empezando a coger el trankillo a esto... es que mira que lo tenia atravesado!... es una cosa ultranecesaria... pero lo vas dejando para otro momento y al final pasan años... :P.

_cronos2... eso es prototype?... si lo es me dan miedo las librerias... :P. Pero gracias por la info...

SergeMedina... tambien gracias por la velo...

El caso es que despues de la ver la funcion getStyle... me parece que me voy a quedar con ella... :P... es facil de usar.

Bueno compis... muchas gracias... y siento molestar... es que mira que encontrar la solucion en la misma hora que la he preguntado... es que... ZASKA!... en toda la boca...

Hasta pronto!.

_cronos2 · #6 (**permalink**) 07/02/2011, 12:45

No, yo tampoco usa librerías, pero es el prototipo de una función, que no tiene que ver con la librería Prototype (o sí, porque como no la uso no sé en qué se basa xD)
Si te digo la verdad no sé qué es exactamente un prototipo, pero sé que equivale a esto:

Código Javascript:

Ver originalfunction miFuncion(){
 this.miMetodo = function(){
  alert('hola');
 };
}
miFuncion.prototype.miMetodo = function(){
  alert('hola');
}

La diferencia es algo así como que cuando usas prototype no tiene que copiar el método cada vez, sino que directamente cada miFuncion sale con el método predefinido. Sé que mi explicación y nada son lo mismo XD, por eso te dejo un enlace a maestrosdelweb donde lo explica buzu.
Saludos (:

salbatore · #7 (**permalink**) 08/02/2011, 00:31

Hola _cronos2,

Gracias de nuevo por la ayuda. La verdad es que me he leido el articulo de buzu... y aunque no esta a mi nivel de conocimientos... algo he entendido. Pero no se que aplicaciones puede tener... supongo que para gente con mas nivel, la verdad es que me gustaria saber sacarle partido... :P.

No lo conoca de nada... ahora mismo me leo mas por google... ejemplos y demas.... igual tengo suerte y lo acabo usando en todas partes...

Gracias!... ah!... y a buzu tambien!.

_cronos2 · #8 (**permalink**) 08/02/2011, 09:20

Se puede usar para extender un objeto pero también una clase, que es algo bastante práctico. Ej:

Código Javascript:

Ver originalString.prototype.low=function(){ return this.toLowerCase(); };
alert('EN MINÚSCULAS'.low()); // 'en minúsculas'

Y así con Number, Array, Object...
Saludos (: