¿Cómo cargar archivos CSS usando Javascript?
¿Es posible importar hojas de estilo CSS a una página HTML usando Javascript? Si es así, ¿cómo se puede hacer esto?
PD: JavaScript estará alojado en mi sitio, pero quiero que los usuarios puedan ingresar la <head>etiqueta de su sitio web y debería poder importar un archivo CSS alojado en mi servidor a la página web actual. (tanto el archivo css como el archivo javascript estarán alojados en mi servidor).
Esta es la forma de hacerlo de la "vieja escuela", que con suerte funciona en todos los navegadores. En teoría, lamentablemente usarías setAttributeIE6 no lo admite de manera consistente.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Este ejemplo verifica si el CSS ya se agregó, por lo que lo agrega solo una vez.
Coloque ese código en un archivo JavaScript, haga que el usuario final simplemente incluya JavaScript y asegúrese de que la ruta CSS sea absoluta para que se cargue desde sus servidores.
vainillajs
A continuación se muestra un ejemplo que utiliza JavaScript simple para inyectar un enlace CSS en el headelemento según la parte del nombre de archivo de la URL:
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
Inserte el código justo antes de la headetiqueta de cierre y el CSS se cargará antes de que se represente la página. El uso de un archivo JavaScript ( .js) externo hará que aparezca un Flash de contenido sin estilo ( FOUC ).
Feb 23 '2009 09:02
Si usas jquery:
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
Supongo que algo como este script funcionaría:
<script type="text/javascript" src="/js/styles.js"></script>
Este archivo JS contiene la siguiente declaración:
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');
La dirección de javascript y css deberá ser absoluta para hacer referencia a su sitio.
Muchas técnicas de importación de CSS se analizan en este artículo "Di no a los hacks de CSS con técnicas de ramificación" .
Pero el artículo "Uso de JavaScript para agregar dinámicamente hojas de estilo CSS de Portlet" menciona también la posibilidad CreateStyleSheet (método propietario de IE):
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
}
else {
var styles = "@import url(' http://server/stylesheet.css ');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
