Cargar CSS con JavaScript

Tamaño de letra:

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

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>

Última actualización: Viernes, 04 Abril 2014
Comentarios  
+1 # CARLOS 04-03-2019 03:48
DISCULPA, EL DETALLE ESTA AL QUERER INSERTAR FUNCIONES ESPECIALES DE CSS DONDE APARECEN COMILLAS DENTRO DEL CODIGO CSS, LO CUAL PUEDE CAUSAR CONFUSION EN JavaScript, ADEMAS DE QUE EL "URL" DE LA FUNCION "@FONT-FACE" QUIERO QUE SEA VARIABLE, ES DECIR, PODER USAR +NuevoUrl de la siguiente manera:

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+) ;}}";
Responder | Responder con una citación | Citar
0 # German 12-04-2018 15:47
hola Karmany, muchas gracias por compartir ese dato!!! me resultó muy util.
saludos, Germán.
Responder | Responder con una citación | Citar
0 # alonso 21-02-2016 07:29
hola me puedes apoyar con mi siguiente codigo no puedo llamar los colores de cada plantilla con javascript






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
Responder | Responder con una citación | Citar
0 # karmany 21-02-2016 10:09
Lo que tu quieres hacer es que el usuario seleccione una plantilla y se cambie completamente el archivo css, ¿no?

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
Responder | Responder con una citación | Citar
0 # Luis 04-04-2014 16:14
Hola:
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.
Responder | Responder con una citación | Citar
+2 # karmany 04-04-2014 17:04
Hola Luis:
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.
Responder | Responder con una citación | Citar
0 # karmany 04-04-2014 17:08
Para crear el estilo de una tooltip, tiene más sentido (es mi opinión Luis, tal vez me equivoque o hayas creado algún código específico) añadir el estilo en el propio estilo de la web (para cargar menos archivos), o añadirlo directamente en el head, o añadirlo directamente en el head mediante un link.
Saludos.
¿Qué opinas?
Responder | Responder con una citación | Citar
Escribir un comentario
Antes de publicar un comentario, usted debe aceptar nuestras condiciones de uso: Condiciones de uso. Debido al spam, todos los comentarios serán moderados. Normalmente se responde en unos minutos, refresca los comentarios para comprobarlo.



 
Visitas: 8489533