Feuilles de style alternatives, problème avec Google Chrome

cyrtex -  
 Anthrax -
Bonjour,

J'essaie de mettre en place un "switcher" de feuilles de style alternatives.
En trouvant différentes sources sur internet, je suis arrivé au code suivant: 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>test</title>
  <style rel="stylesheet" type="text/css" title="green">
body { background: green; }
  </style>
  <style rel="alternate stylesheet" type="text/css" title="red" disabled>
body { background: red; }
  </style>
  <script type="text/javascript">
function doclick(){
  list=document.getElementsByTagName("style")
  for(i=0; i<list.length; i++) {
    if(list[i].disabled) { list[i].disabled=false ; } else { list[i].disabled=true ; }
  }
}
  </script>
  </head>
  <body>
    <h1>This is a test</h1>
    <button onClick="doclick();return false;">Click</button>
  </body>
</html>


Il fonctionne parfaitement sous Firefox, c'est-à-dire qu'en cliquant sur le bouton, la couleur de fond de page bascule bien du vert au rouge et vice-versa.

Par contre lorsque j'essaie de l'exécuter sous Google Chrome, cela échoue. Le bouton active/désactive bien la feuille de style du fond vert, mais jamais la deuxième feuille de style n'est activée. Le fond rouge n'apparait jamais.

Y-a-t-il une subtilité avec Chrome ?

Configuration: Windows / Firefox 98.0
A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2845 Statut Membre 527
 
Bonjour,

En effet, contrairement à Firefox, Chrome et d'autres navigateurs requiert une extension pour prendre en charge les feuilles de style alternative : https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets
0
Réponse 2 / 2
Anthrax
 
Salut,
il reste la solution de changer le contenu de la balise STYLE ou LINK par JS.

Pour la balise LINK (un .css externe donc) il faudra recharger celle ci(là j'ai plus en tête comment le faire) tandis qu'en rajoutant du CSS dans la page(dans STYLE)la dernière règle marqué sera prise en compte en écrasant son doublon éventuel ou en vidant tout et réécrivant tout.

Un truc du genre 

function getPageStyle(){
let pageStyle=document.getElementsByTagName('style')[0]/* certes mieux si on met des ID avec getElementById mais plus réutilisable comme ça*/
 if( pageStyle==null || pageStyle=='undefined'){
  pageStyle=document.createElement('STYLE')
  pageStyle.setAttribute('rel','stylesheet')
  pageStyle.setAttribute('type','text/css')
  document.getElementsByTagName('head')[0].appendChild(pageStyle)
 }
return pageStyle
}

function addInStyle(monCSS){
let style=getPageStyle()
style.innerHTML+=monCSS
return style.innerHTML //-- pour vérif éventuel
}

function newStyle(monCSS){
getPageStyle().innerHTML=monCSS
return style.innerHTML
}




/* utilisation en rajout, le dernier à parler aura raison*/
addInStyle('body{margin:1em;} #someRule{'color:rgba(255,255,255,0.5);'} .anotherRule{color:blue;}')

/* en vidant tout le contenu précédent*/
let completeStylesheet='body{margin:0; } .maClasse{border:1px solid red;}'

newStyle(completeStylesheet)
0