Définir une classe css dans le code jquery.

**piotrr** · 24/07/2009, 12h48

Je sais qu'on peut définir des styles dans jquery via :

Code :

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

1
2
3
4
5
6
 
monStyle:{
 
    'attributCss':'valeur' 
 
}

Mais comment définir dans le code jquery un style qui représenterait une classe ?

La finalité étant de pouvoir faire des addClass et des removeClass sur ce style.

**andry.aime** · 24/07/2009, 15h28

Bonjour,
utilise la fonction css :

Code :

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

$("#idDeLelement").css({ color: "red", background: "blue" });

**piotrr** · 24/07/2009, 17h40

Ok je connais bien.

Mais ce que je veux moi c'est pouvoir faire :

$("#idDeLelement").addClass(maClassDefinieDansMonCode
ou encore

$("#idDeLelement").removeClass(maClassDefinieDansMonCode
Ce n'est pas possible ?

merci

**BkD35** · 24/07/2009, 17h55

Non ce n'est pas faisable et je t'avoue que je n'en voie pas trop l'intérêt ?

Pourquoi ne pas créer simplement tes classes dans un fichiers CSS, tellement plus simple et plus conventionelle ?

Si c'est pour des classes dynamique, il faut utilise le .css() pour changer les propriétés dynamiques.

**piotrr** · 26/07/2009, 12h02

Envoyé par BkD35

Non ce n'est pas faisable et je t'avoue que je n'en voie pas trop l'intérêt ?

L'idée c'est de pouvoir enlever et rajouter le style facilement et que celui - ci soit définit dans le jquery.

La méthode css() permet d'ajouter un style mais pas de le retirer. N'est - ce pas?

C'est pour ça que je me tourne naturellement vers les classes.

**BkD35** · 26/07/2009, 17h39

Tu peux très bien retirer un style un le css() de jquery.

Exemple :

$('.selector').css('background-color' : 'red'); => fond rouge

$('.selector').css('background-color' : ''); => on remet à sa valeur de départ

**danielhagnoul** · 26/07/2009, 21h07

Bonsoir piotrr.

Je trouve aussi qu'il devrait être possible de définir « dynamiquement » une class dans le Javascript.

Mais je suis arrivé à manipuler le style comme si :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        .classTest {
            padding:6px;
        }
    </style>
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function(){
            var classMod = {
                color:"#0033CC",
                backgroundColor:"#FFFFCC",
                margin:"6px"
            };
 
            var border = undefined;
 
            function modifie(){
                $("#affiche").css(classMod);
            }
 
            function origine(){
                $("#affiche").removeAttr("style"); //fonctionne uniquement si l'attr style est défini dans le HTML
                $("#affiche").css("border", border);
            }
 
            $("#btn").click(function(){
                border = $("#affiche").css("border");
                $("#affiche").removeAttr("style");
                setTimeout(modifie,1000);
                setTimeout(origine,2000);
            });
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche" class="classTest" style="border:thin dashed #33CC00;">
            <p>
                Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
            </p>
        </div>
        <p><button id="btn" type="button">Joue avec le style</button></p>
    </div>
</body>
</html>

**piotrr** · 27/07/2009, 09h55

Envoyé par BkD35

Tu peux très bien retirer un style un le css() de jquery.

Exemple :

$('.selector').css('background-color' : 'red'); => fond rouge

$('.selector').css('background-color' : ''); => on remet à sa valeur de départ

Ok mais je voudrai pouvoir retirer un ensemble de styles et ne les définir qu'une seule fois (dans une variable par exemple).

**BkD35** · 27/07/2009, 10h25

Tu créé une extension de jQuery du style

$('.selector').removeCss(Obj);

Voilà une nouvelle fonction que tu mets en place, elle prend en paramètre un objet javascript idem que : $('.selector').css(Obj);

Squelette de la fonction removeCss

Code :

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

1
2
3
4
5
6
 
function removeCss(Obj) {
   $.each(Obj, function(key, val) {
      $(this).css(key, '');
   });
}

Je n'ai pas testé le code et il risque de ne pas fonctionner, c'est simplement pour te donner une idée général de ce que tu peux mettre en place

**piotrr** · 27/07/2009, 12h56

Ok c'est aussi ce que je pensais faire à défaut de fonction toute faite.

Merci

Définir une classe css dans le code jquery.

jQuery

Discussions similaires

Partager

Partager