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:

Modifier CSS avec Javascript


simous

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
Lien vers le commentaire
Partager sur d’autres sites

ce que tu peux faire c'est deux CSS

Tu reconnais le navigateur grace à du javascript, et suivant le modele, tu charges le CSS adéquat

Lien vers le commentaire
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 ;-)

Lien vers le commentaire
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 :-(

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...