Cargar CSS con JavaScript
Cargar archivo CSS con Javascript desde el body
Ya sabes que lo más sencillo para añadir un archivo externo de hojas de estilo en cascada (CSS), es hacerlo dentro de las etiquetas <head> </head> (elemento <head>) del siguiente modo:
<link rel="stylesheet" href="/tu_archivo_de_estilo.css" type="text/css">
Para una web estática, este tema que tratamos no es ningún problema, ya que, se puede insertar perfectamente la línea anterior, sin embargo, si trabajas en tu blog o web con una web dinámica, esto se convierte en un problema porque, generalmente, no puedes modificar el elemento <head> así a la ligera desde código html. Cierto es que los gestores de contenido y otras webs, permiten hacerlo mediante aplicaciones -o no- de terceros, por ejemplo, con plugins en Joomla! pero hoy vamos a ver cómo insertar un archivo CSS desde Javascript sin utilizar plugins.
Cuándo usarlo
No es lo normal hacerlo así. Además el posible editor WYSIWYG que uses en tu web, es fácil que incluso no te permita insertar scripts -por seguridad- y te los borre. En Joomla!, esto se puede solucionar quitando el editor por defecto en Configuración Global o en la configuración de los usuarios.
Un archivo CSS no se puede agregar dentro del elemento <body> tal como se hace en el <head>. Para crear un estilo en el <body> se suele recurrir a las denominadas "reglas de estilo en línea". Por ejemplo:
<td style="padding:6px;">
Pero cuando necesitas llamas a un archivo externo, tienes que recurrir a otro método. ¡No vas a escribir todo el estilo en línea! Yo me incliné a hacerlo con Javascript.
Recomendaciones W3C sobre estilos: http://www.w3.org/TR/html4/present/styles.html
¿Para qué puede ser útil hacer esto? A mí me ocurrió, por ejemplo, al usar tablas y ordenarlas con Javascript -que veremos en breve-. Es decir, escribí un artículo como este y, en el mismo, añadí una tabla con código html. Esa hoja de estilos que cargo, completa la que tiene mi template por defecto, así, cuando el usuario permite la ejecución de Javascript, carga el archivo css y permite la ordenación de tablas. Como ves, en este caso, me ahorra código de más en la presentación de tablas que no tengo por qué tener por defecto en mi plantilla CSS.
El código
Después de indagar por la red y probar unos cuántos códigos, descubrí el siguiente que he testeado en IE6-9, Firefox, Chrome, Opera y Safari:
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://servidor/tu_archivo.css');
}
else {
var styles = "@import url(' http://servidor/tu_archivo.css ');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
Como precaución debes saber que las direcciones son absolutas.
Referencias
- El código original lo encontré en esta web: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
- Para desarrolladores, para que no recargue el archivo desde la caché, podéis adaptar lo que aquí se comenta: http://www.driverop.com.ar/javascript/dynloadcss
Como puedes observar, este artículo se refiere a HTML 4. HTML 5 permite también generar estilos mediante el atributo scoped, por ejemplo:
<div>
<style type="text/css" scoped>
p
{
text-align: center;
}
</style>
<p>Buen día, Luis</p>
</div>
ListaDeFuentes[1]="nombre de la url de la fuente 1"
ListaDeFuentes[2]="nombre de la url de la fuente 2"
ListaDeFuentes[3]="nombre de la url de la fuente 3"
ListaDeFuentes[4]="nombre de la url de la fuente 4"
ListaDeFuentes[5]="nombre de la url de la fuente 5"
ListaDeFuentes[6]="nombre de la url de la fuente 6"
n=n+1;
NuevoUrl=ListaDeFuentes[n];
texto1.style.cssText = "font-size: 90px; text-align: center; font: bold 36px 'MiNuevaFuente' ; @font-face { font-family: 'MiNuevaFuente' ; src: url(/+NuevoUrl+) ;}}";
saludos, Germán.
Telefonia y Seguridad Informática
$(document).ready(inicio);
function inicio(){
$("select").change(cambiacss);
}
function cambiacss(){
var plantilla =$("select").attr("value");
$("plantilla").html('');
}
Selecciona una Plantilla
Plantilla para PC
Plantilla Alta Definicion
Plantilla para Teléfono Móvil
Pantilla para Tableta Digital
Eso no está explicado en este artículo. Si usas un CMS normalmente tienes alguna extensión que te permite hacerlo directamente, pero desde JavaScript o JQuery directamente hay que buscar info. Te dejo algunos enlaces interesantes:
1.- Replacing css file on the fly (and apply the new style to the page)
2.- How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically
3.- Intercambiar la hoja de estilos CSS con jQuery
Yo estaba buscando por la red si era correcto cargar un archivo css desde body.
Por circunstancias que no vienen al caso, he optado por esta opción. Pero lo único que yo buscaba, era saber si eso era correcto y mi sorpresa ha sido toparme con tu artículo, en el que dices que no es posible sin javascript. Pues siento contradecirte, pero yo he plantado el link tal cual en el body, como si estuviera en el head y funciona perfectamente. Es un css que uso para un tooltip y va perfecto así, sin javas ni historias.
Saludos: Luis.
PD: sigo con mi duda de si es correcto.
Saludos.
1.-Cuando escribí el artículo, la web, el enlace de la W3C y la información, fue basada en HTML 4. Sin embargo, HTML5 es mucho menos riguroso y te permite hacer uso de estilos para elementos hijos (atributo scoped), por ejemplo:
Código:
<div><style type="text/css" scoped>
p
{
text-align: center;
}
</style>
<p>Buen día, Luis</p>
</div>
Sin embargo, no todos los navegadores lo saben interpretar. Uno de los primeros en hacerlo fue Firefox.
2.-Por otro lado, el estilo de un elemento hijo, se cargará después que uno que llames en el head.
3.-Finalmente, respecto a poner un enlace a un archivo de estilo CSS, si observas este enlace verás que se espera utilizar junto al contenido de los metadatos.
¿Está bien lo que has hecho? Yo al 100% no lo sé, pero yo considero que no es una buena práctica porque no veo lógico su uso.
Saludos.
¿Qué opinas?