document.styleSheets

dukeblass · #1 (**permalink**) 14/06/2011, 09:56

hola, eeee.

tengo un dilema al momento de recoger los estilos de una pagina externa css con javascript, la función que ejecuta el código funciona perfectamente... y el problema el en la forma como se recogen estos estilos ejemplo

-> tengo esto en el css

Código CSS:

Ver original.cla1{padding:10px; border:#F00 2px solid;}

-> ie7,chrome, safari, opera y otros devuelven esto

Cita:

padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-color: rgb(255, 0, 0); border-right-color: rgb(255, 0, 0); border-bottom-color: rgb(255, 0, 0); border-left-color: rgb(255, 0, 0); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;

que obviamente es lo mismo que hay en la hoja css pero de una forma mas estructurada

-> en diferencia IE9,firefox sale

Cita:

padding: 10px; border: 2px solid rgb(255, 0, 0);

que es la forma como esta escrita en el la hoja de estilos

-> ¿hay alguna forma de hacer que estos navegadores devuelvan como lo hace IE9 o firefox, o eso ya depende del navegador?

_cronos2 · #2 (**permalink**) 14/06/2011, 11:10

Depende del navegador, pero si expones para qué lo necesitas a lo mejor podemos ver qué hacer.
Saludos (:

dukeblass · #3 (**permalink**) 14/06/2011, 11:47

hola _cronos2,

---> prueba:

Código:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>pruebas</title>
<script type="text/javascript">
css=function(a,d,e){var g=!1,c=w=!1,a=a||!1,d=d||!1,e=e||!1;t=document.styleSheets[0].cssRules||document.styleSheets[0].rules;typeof a=="object"&&(a=a.className.split(" ")[0]);if(typeof a=="string"){for(var b=a.match(/^\./g)?a:"."+a,f=0;f<t.length;f++)switch(t[f].selectorText){case b:c=t[f].style.cssText.toLowerCase()}if(a&&b&&d==!1&&e==!1)g=c;else if(a&&b&&d&&e==!1){c=c.split(";");for(b=0;b<c.length;b++)c[b]=c[b].split(" ").join(""),c[b].split(":")[0].indexOf(d)!=-1&&(g=c[b].split(":")[1])}}return g};
window.onload=function(){
		document.getElementById('sil').innerHTML= css('cla1');

}
</script>
</script>

<style>
	.cla1{padding:10px; border:#F00 2px solid;}
	.cla2{background:#666; color:#fff;}
	
</style>

</head>

<body>
<div id="sil">jajaj</div>
<hr><br>
 <a class="cla1 cla2" id="enlace">Elemento de prueba</a>
</body>
</html>

prueba esto es distintos navegadores y te saldra
-> chrome

Cita:

padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-color: rgb(255, 0, 0); border-right-color: rgb(255, 0, 0); border-bottom-color: rgb(255, 0, 0); border-left-color: rgb(255, 0, 0); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;

-> ie7

Cita:

border-bottom: #f00 2px solid; border-left: #f00 2px solid; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; border-top: #f00 2px solid; border-right: #f00 2px solid; padding-top: 10px

->ie9,firefox

Cita:

padding: 10px; border: 2px solid rgb(255, 0, 0);

-------

en logica esta perfecto, pero el dilema esta cuando quiero un elemento ejemplo llamo a la función para obtener el border del id

Código Javascript:

Ver originals('#sil').innerHTML+='<br>--> '+ css(s('#enlace'),'border ');

y al momento de obtenerlo en ie9 perfecto, firefox igual, pero chrome, opera, safari como haría dado que no es border si no border-algo-algo, y por estos en css no voy a ponerlo así, por un simple border o margen o cualquiera que tenga mas de un valor
-------
no se si logre realizar el chrome u opera como en ie9 o FF

-------
PD: no uso jQuery

Panino5001 · #4 (**permalink**) 14/06/2011, 12:12

Para obtener los estilos computados no te conviene algo como esto?:

Código:

function getCSS(o,prop){
    if(window.getComputedStyle){
        return document.defaultView.getComputedStyle(o,null).getPropertyValue(prop); 
    }else{ 
        var re = /(-([a-z]){1})/g; 
        if (prop == 'float') prop = 'styleFloat'; 
        if (re.test(prop)) { 
            prop = prop.replace(re, function () { 
                return arguments[2].toUpperCase(); 
            }); 
        } 
        return o.currentStyle[prop] ? o.currentStyle[prop] : null; 
    } 
}  
var r=getCSS(s('#enlace'),'border');//asumo que la función s devuelve una referencia al elemento html
alert(r);

dukeblass · #5 (**permalink**) 14/06/2011, 12:28

hola Panino5001, también es valido, pero tiene el mismo dilema, que si en el css especificas solo padding:10px;, el navegador los descompone a padding-top: 10px; padding-right: 10px; padding-bottom: 10px; y lo que se desea es que no aga eso ya que en padding pasa pero en border ejemplo, si quieres llamar a border no puedes ya que tendrias que llamar de esta forma border-top-color o border-top y así las cantidad de descomposición que tenga border según el tipo de navegador solo parar llamar a border.

al final creo que no se puede ya que depende del navegador