Est-il possible d'importer des feuilles de style css dans une page html en utilisant Javascript ? Si oui, comment faire ?
P.S le javascript sera hébergé sur mon site, mais je veux que les utilisateurs puissent mettre dans la balise <head>
de leur site web, et il devrait être capable d'importer un fichier css hébergé sur mon serveur dans la page web actuelle. (le fichier css et le fichier javascript seront tous deux hébergés sur mon serveur).
Je suppose que quelque chose comme ce script ferait l'affaire :
<script type="text/javascript" src="/js/styles.js"></script>
Ce fichier JS contient la déclaration suivante :
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');
L'adresse du javascript et du css doit être absolue si elle doit faire référence à votre site.
De nombreuses techniques d'importation CSS sont présentées dans cet article ["Say no to CSS hacks with branching techniques" ;][1].
Mais l'article "Using JavaScript to dynamically add Portlet CSS stylesheets" ; mentionne également la possibilité de CreateStyleSheet (méthode propriétaire pour 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);
}
//]]>
La [bibliothèque YUI][1] est peut-être ce que vous recherchez. Elle prend également en charge le chargement inter-domaines.
Si vous utilisez jquery, [ce plugin][2] fait la même chose.
[1] : http://developer.yahoo.com/yui/get/ [2] : http://nicolas.rudas.info/jQuery/getPlugin/
Vous pouvez utiliser cette [bibliothèque YUI][1] ou utiliser cet [article pour implémenter][2].
[1] : http://developer.yahoo.com/yui/get/ [2] : http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml