Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

simous

Modifier CSS avec Javascript

Messages recommandés

Bonjour à tous et à toutes...

 

Voici une partie de ma CSS :

 

#simous { list-style-type: none; padding: 5px; margin: 0px; color: #fff; background-color: #494949;top:14px;left:0;width:160px  }

#simous .elements { display: none; list-style-type: none; padding: 5px }

 

J'aimerais modifier les propriétés de la classe "elements" (display:block) par un javascript en fonction du navigateur (pour IE et Opera)

 

Quelqu'un aurait-il une astuce ?

 

Merci :P

Modifié par simous

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut Tangui :P

 

Effectivement c'est une solution mais que ne peut pas fonctionner dans mon cas précis :-(

 

Il me faut modifier le paramètre display de la classe elements via un javascript :-P

Partager ce message


Lien à poster
Partager sur d’autres sites

J4ai rien trouvé sur la manipulation directe des classes, par contre on trouve facilement des exemples de getElementsByClassName() qui te permettent de changer le style des éléments à la volée...

 

-- edit --

En fait, c'est casse-pieds de reparcourir tous les éléments de la page en cherchant ceux qui ont un classname égal à la classe que tu veux, et de leur modifier individuellement l'attribut display ...

 

Quelques personnes se sont penchées sur le même problème avec plus ou moins de succès :

http://forums.devshed.com/t115036/s41d66d9...acdf98c72a.html

 

Un exemple :

<STYLE ID="tssxyz" TYPE="text/css"></STYLE>
<script LANGUAGE="JavaScript1.2"><!--
var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)==4) && 
    (agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
              && (agt.indexOf('compatible') == -1) ) {
document.tags.P.fontSize="25pt";
}
else if (agt.indexOf('gecko') != -1) { 
document.getElementById('tssxyz').sheet.insertRule('P { fontSize: 25pt }', document.getElementById('tssxyz').sheet.cssRules.length )
}
else if ( (parseInt(navigator.appVersion)>=4) && 
    (agt.indexOf('msie') != -1) ) {
document.styleSheets["tssxyz"].addRule ("P", "fontSize:25pt");
}
//--></SCRIPT>

 

En fait, ce qui va t'interesser, c'est le fait de pouvoir désigner par un id ta feuille de style (donc accessible par un document.getElementById() pour les navigateurs compatibles DOM) et d'y ajouter à la volée (avec sheet.insertRule()) la règle qui t'interesse, en fonction du navigateur...

Fais-en bon usage ;-)

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci Kewlcat :P

 

Je suis arrivé à peu près à la même conclusion, à savoir un addRule pour IE..

 

Par contre pour Opera, je vais donc tester ce sheet.insertRule que je ne connaissais pas.

 

Pour Firefox et Mozilla, pas de pb, la stylesheet fonctionne et n'a pas besoin d'etre modifiée.

 

Merci beaucoup pour avoir pris le temps de chercher, je vois que l'equipe Zebulon est toujours aussi efficace :-(

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×