Masquer toutes les balises d'une classe ?

**tintin72** · 06/06/2009, 10h08

Bonjour,

Je voudrais savoir comment faire pour masquer toutes les balises ayant
comme attribut: class="maClasse".
Je connais la syntaxe style.display="none" qui permet d'agir sur le CSS par
contre je ne sais pas comment atteindre les balises concernées.

Est ce qu'il faut lister toutes les balises dans une boucle puis vérifier qu'elles
ont un attribut class puis que cet attribut a la valeur maClasse ou y a t-il
un moyen plus directe ?

Merci d'avance

**Bovino** · 06/06/2009, 10h14

JavaScript agit sur des objets générés depuis une page HTML et non sur le code HTML lui-même. Donc ton souci est de récupérer la collection d'objets correspondants. Par exemple en implémentant une fonction du type getElementsByClassName.
Autre solution, travailler directement sur l'objet JavaScript stylesheets qui référence les feuilles de styles avec les règles CSS comme propriétés de ces objets. Je t'avoue qu'il est préférable d'avoir un minimum de connaissances en JavaScript pour cette solution

**nod__** · 06/06/2009, 11h04

Avec getElementsByClassName c'est pas trop dur et direct. Pour ce qui est du bidouillage de feuilles de style ça donne quelque chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Test modif CSS</title>
    <style>
        .bold {
            font-weight:bold;
        }
    </style>
</head>
 
<body>
<p>Hello <em class="bold">world</em> !</p>
 
 
<script type="text/javascript">    
    function hide (selector) {
        // dans une fonction, c'est facilement adaptable ensuite
        // ici le "this" représente "cssRule.style" c'est pour faire plus court
        function action (cssRule) {
            this.display = "none";
            // on peut mettre des choses du genre
            // this.color = "red";
            // this.paddingLeft = "20px";
            // etc.
        }
 
        // faudrait vraiment que IE implémente Array.forEach()
        for (var i=0, il = document.styleSheets.length; i < il; i++) {
            (function findCSSRule () {
                // ici le "this" correspond à "document.styleSheets[i]"
                var rules = this.rules || this.cssRules; // ie || le reste du monde
                // Array.forEach() :''(
                for (var n=0, nl = rules.length; n < nl; n++) {
                    //console.log(rules[n].selectorText);
                    // on cherche notre machin
                    if (rules[n].selectorText === selector) {
                        // pouf on applique à la règle trouvée
                        action.call(rules[n].style, rules[n]);
                    }
                }
            }).call(document.styleSheets[i]); // le with() du pauvre
        }
    }
 
    // on teste
    hide(".bold"); // Hello !
</script>
</body>
</html>

Les feintes : avec ce code il faut que les selecteurs soient exactement les même, avec une déclaration du style ".bold, .autreClasse {}" ça ne marchera pas et utiliser une regex c'est pas top non plus ici, 1/ on change le style des deux classes en même temps, 2/ ça marchera pas sous IE. Se limiter à ".maClasseAChanger {}" uniquement, comme ça on passe à coté d'une limitation de IE pour pas cher.

**tintin72** · 06/06/2009, 13h43

Merci pour ces réponses.

Je pense que je vais opter pour la fonction du type getElementsByClassName qui
me parait plus sûre.
La manipulation de CSS est aussi intéressante mais elle me semble plus incertaine (compatibilité browser etc...).

**nod__** · 06/06/2009, 14h02

A vrai dire pas vraiment, avec getElementsByClassName(), elle est déjà implémentée sur FF, webKit et probablement opera en natif mais il faut l'émuler pour IE, donc niveau problèmes de compatibilité c'est kiff-kiff.

Après oui, quand on maitrise pas le truc ça semble «incertain». Au final en javascript c'est aussi incertain que le sont les connaissances sur la méthode en question ^^ .

Si tu n'as pas des centaines d'élements à cacher ça sera pas bien grave d'aller chercher tous les élements. Mais dès que tu en as beaucoup je te conseil d'essayer la manipulation des feuilles de styles ça sera beaucoup plus «rapide».

Masquer toutes les balises d'une classe ?

JavaScript

Discussions similaires

Partager

Partager