Chargement aléatoire de CSS sur l’actualisation de la page

Je me demandais quel est le meilleur moyen d’appeler un fichier CSS aléatoire sur la page d’actualisation avec Javascript?

Merci beaucoup

var link = []; link[0] = "http://site.com/css/style1.css"; link[1] = "http://site.com/css/style2.css"; link[2] = "http://site.com/css/style3.css"; $(function() { var style = link[Math.floor(Math.random() * link.length )]; $('',{ rel :'stylesheet', type:'text/css', href: style }).appendTo('head'); }); 

Edit : Merci Basil Siddiqui!

 var link = []; link[0] = "http://site.com/css/style1.css"; link[1] = "http://site.com/css/style2.css"; link[2] = "http://site.com/css/style3.css"; $(function() { var style = link[Math.floor(Math.random() * link.length )]; if (document.createStyleSheet){ document.createStyleSheet(style); }else{ $('',{ rel :'stylesheet', type:'text/css', href: style }).appendTo('head'); } }); 

Si vous utilisez PHP, vous pouvez lire votre répertoire CSS et choisir un fichier comme celui-ci:

 '; ?> 

Merci pour vos conseils, ne pas réalisé que c’était possible avec une simple ligne de php et effectivement trouvé que cette méthode était assez courte et douce

  

Je l’ai trouvé ici, http://forum.mamboserver.com/showthread.php?t=61029

Merci beaucoup

ps. Une liste a également une façon assez simple et shinye de changer d’image, http://www.alistapart.com/articles/randomizer/

Ajoutez un élément sur document.ready .

 var randomFileName=Math.random(); // or whatever $(document).ready(function() { $('head').append(''); }); 

Non testé Comme mentionné ci-dessus, il est probablement préférable (lire: plus compatible) que le script côté serveur crache un nom de fichier aléatoire directement dans le code HTML de la page au lieu d’utiliser la supercherie JS.

vous pouvez le faire en générant un lien aléatoire en utilisant simplement javascript

 

Si vous souhaitez utiliser JavaScript, le meilleur moyen est de charger tous les styles aléatoires dans un seul fichier de la manière habituelle.

Ajoutez ensuite tous les css aléatoires avec un nombre tel que:

 .random-1 h1 { color: blue; } .random-2 h1 { color: red; } /* ... etc... */ 

Ajoutez simplement une classe aléatoire au corps avec javascript.

 document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1); 

Cela devrait limiter les problèmes de chargement et de rendu, et vous n’avez pas à vous soucier du moment d’appeler le javascript. (De plus, vous avez la possibilité de changer de style avec plus de javascript)

(Les problèmes de rendu dépendent du type de modifications que vous apportez – bien que cela ne soit pas différent du masquage et de la présentation des objects DOM que vous voyez sur de nombreux sites Web.)