Changer propriété css si javascript désactivé

[christ8phe]

Bonjour à tous,

Après plusieurs heure de recherche je sèche.

Je suis sur une page web ou j'ai pas mal de div imbriqué les unes sur les autres auquel j'ai attribué une "position:absolute;" en css et que je fais apparaître / disparaître en javascript, jusque là tout va bien.

Mon souci c'est que pour être accessible à un maximum de gentils surfeurs je souhaiterais passer mes div en postion:relative; dans le cas ou javascript est désactivé.

En tout bon noob je découvre lors de recherche sur google la balise noscript, ce qui m'a donné :

Code :

1
2
3
4
5
6
7
8
9
<object><noscript><style type="text/css">
  	div.image_acc{
		position:relative;
		}
 
	div.tableau{
		position:relative;
		}</style>
  </noscript></object>

Youpi ça fonctionne !
Mais attention à la validation W3C qui me dit que neni maintenant tu à une erreur dans ton code !

Donc j'essaie d’inverser les rôles en renversent la tendance, je met les position par défaut en relative et j'essaie de les changer en JS mais vu que ce sont des class et que getElementByClasse n'existe pas.

Bref j'ai vu plein de solution bisar ou inexistante alors j'aimerais savoir si l'un d'entre vous aurais une solution simple, propre et légère.

Merci à tous.

[SpaceFrog]

? pourquoi le style dans une balise object

sinon regarde du coté de jquery si tu ne veux pas faire ta propre fonction getElementsByClass avec les selecteur jquery c'est un jeu d'enfant

sinon getElementByClassName est il me semble implémenté sur les navigateurs récents


sinon

Code :

1
2
3
4
5
6
7
8
9
10
11
document.prototype.getElementsByClass=function(classname){
  var taball=document.getElementsByTagName('*');
  var tabclass=new Array();
  var i=-1;
  while(taball[++i]){
   if(taball[i].className==classname){
          tabclass.push(taball[i])
          }
  }
 return tabclass;
}

[Bovino]

Le plus simple selon moi serait d'ajouter une balise style :

Code :

1
2
3
4
var styleJS = document.createElement('style');
styleJS.type = 'text/css';
styleJS.appendChild(document.createTextNode('.taClasse{position:absolute;}');
document.getElementsByTagName('head')[0].appendChild(styleJS);

[SpaceFrog]

ou une balise link

Code :

1
2
3
4
5
6
 
 
var stylelink = document.createElement('link');
styleJS.type = 'text/css';
styleJS.href="fichier.css"
document.getElementsByTagName('head')[0].appendChild(styleJS);

[christ8phe]

Merci pour vos réponse.

J'avoue avoir un petit faible pour celle de bovino.

Donc si j'ai bien compris je place ton code dans ma fonction window.onload par exemple, celle-ci au chargement de la page va directement me crée une balise :

Code :

<style type="text/css"></style>

que je peut incrémenté avec la ligne :

Code :

styleJS.appendChild(document.createTextNode('.taClasse{position:absolute;}');

J'ai bon ?
J'aime bien tout comprendre plutôt que de recopié bêtement ;-)

Merci Frog pour ta dernière solution qui ne me servira peut être pas dans ce cas mais c'est bon à savoir.