Usar Javascript para insertar CSS on the Fly

Julcar · #1 (**permalink**) 03/08/2010, 23:22

Bueno amigos, el caso:

Tengo un sitio web cuyo css por razones de optimizar carga, lo tengo entre etiquetas <style type="text/css"></style>

El sitio todo bien, ahora, el cliente quiere esquinas redondeadas en algunos elementos, y por otro lado quiero que el codigo pase el validador. La opcion recomendada es usar las conocidas *border-radius y sus respectivas para gecko y webkit, pero ovbiamente no las voy a introducir entre <style></style>

Asi que se me ocurrió esta idea:

Tomar el codigo css "invalido"

meterlo en una variable y luego on the fly y haciendo uso de DOM colocarlo entre <style></style>, asi el codigo valida, se ve todo OK y todos contentos.

Pero para Javascript no soy muy bueno, y me estoy quedando en algo tonto, sucede que el css es mucho y necesito meterlo en una sola variable, y como todos saben, en CSS se trabajan con semi-colons y los semi-colons son tambien el signo de cierre de linea en JS, y de esa forma no puedo colocar una variable de esta forma

Código:

var css = ".square {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}";
...

simplemente el motor de JS se queda en el primer semi-colon y no interpreta el resto, aplausos por los lenguajes orientados a C

¿Alguien sabe como puedo evitar que suceda esto y lograr mi cometido?
Saludos y gracias

Panino5001 · #2 (**permalink**) 04/08/2010, 05:35

Los punto y coma dentro de comillas no deberían darte ningún problema ya que son tomados cualquier otro caracter dentro de una cadena.
Esto, por ejemplo funciona sin problemas (obviamente, para Explorer necesitarás algún parche para que te tome las esquinas redondeadas, te sugiero http://dillerdesign.com/experiment/DD_roundies/):

Código PHP:

  <!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=iso-8859-1" />

<title>Documento sin título</title>

<style type="text/css">

.algo{ width:300px; height:200px; background:#F00; color:#FFF; padding:10px;}

</style>

<script type="text/javascript">

function addCss(cssCode,i) {

    control=document.getElementById(i)

    if(control)

        document.getElementsByTagName("head")[0].removeChild(control)

    var styleElement = document.createElement("style");

    styleElement.type = "text/css";

    if (styleElement.styleSheet) {

        styleElement.styleSheet.cssText = cssCode;

    } else {

        styleElement.appendChild(document.createTextNode(cssCode))

    }

    styleElement.id =i;

    document.getElementsByTagName("head")[0].appendChild(styleElement);

} 

onload=function(){

    var css = ".square {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}";

    addCss(css,'a_'+new Date().getTime());

}

</script>

</head>

 
<body>

<div class="algo square">Esto es un ejemplo</div>

</body>

</html>