Sujet Précédent Sujet Suivant

Feuilles de style alternatives, problème avec Google Chrome

Fermé
cyrtex - 16 mars 2022 à 12:09
 Anthrax - 17 mars 2022 à 10:59
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 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 mars 2022 à 16:53
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
Modifié le 17 mars 2022 à 11:14
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