28172 sujets

CSS et mise en forme, CSS3

Créer une condition if en css

Bonjour
Est-ce qu'il est possible en css que lorsque par exemple ma class .demo1 est en display:block ma class .demo2 soit automatiquement en display:none

Merci d'avance
Modifié par stephane72 (11 Oct 2013 - 12:28)
Bonjour stephane72,

tu ne peux pas faire de condition dans ton fichier CSS, mais tu peux faire une condition sur tes classes avec javascript, et même jquery.

il faut faire un truc du genre :

if ($(".demo1").css('display', 'block')){
$(".demo2").css('display', 'none');
}
salut,
il faudrait détailler un peu plus ce que tu voudrais faire, peut être qu'il y aura un moyen simple.

@jeff-roland> Avec ce code, ça impliquerait aussi une vérification permanente du display de ".demo1".
Bonjour à toutes et à tous.

Il y a deux techniques pour procéder ainsi et les deux utilises, bien sûr le JavaScript.
Tout dépend de la volumétrie des propriétés CSS qui sont impactés par cette condition.

1) Utiliser les Feuilles de Styles "alternative".
C'est facile à mettre en œuvre et tu peux être très bavard dans les déclaratives CSS.

2) Bidouiller avec du code JavaScript afin de venir insérer la propriété que tu désires.
Ne pas oublier que si Javascript est désactivé, cela ne fonctionne plus.

Mais comme nous ne savons pas très bien ce que tu veux faire, tu dois nous en dire un peu plus.

@+
Merci pour vos réponse.J'ai finalement suivi l'idée de jeff-roland en créant une condition en jquery

if ($("#reserver").css('display', 'none')){
$("#reserver").css('display', 'block');
}
if ($("#tarifs").css('display','block')){
$("#tarifs").css('display','none');
 }


et ca fonctionne Smiley smile

Merci
Heureux que ça fonctionne pour toi.
Pour ce genre de conditions en jquery, il faut faire attention que ça n'impacte pas d'autres CSS.

Pour ton exemple, c'est très simple. Mais pour des choses plus complexe, ça peut devenir un enfer comme l'a remarqué tournikoti
Euh... ça marche vraiment ? Smiley biggol

Parce que là ton code il dit :

si la transformation de la propriété css "display" de ID "reserver" en "none" alors, tu transformes la propriété css "display" de ID "reserver" en "block".

si la transformation de la propriété css "display" de ID "tarifs" en "block" alors, tu transformes la propriété css "display" de ID "tarifs" en "non".

Smiley biggol


Tu voulais pas plutôt faire un truc genre :

if ($("#reserver").css('display')=='none'){
$("#tarifs").css('display', 'block');
}
if ($("#reserver").css('display')=='block'){
$("#tarifs").css('display','none');
 }
Bonjour tout le monde,

Pour Lothindil,
la méthode .css de jquery peut avoir cette syntaxe :
$('p').css('color');

cette syntaxe récupère la valeur de "color" et nous la retourne

Il y a aussi cette syntaxe :
$('p').css('color', 'red');

Cette méthode modifie la propriété "color" et la définie à "red"

Il n'y a pas de "=", ou de "==" dans cette syntaxe.

Pour gc-nomade,
La valeur par défaut de "display" est "inline".
Pour trouver cette réponse, il suffit de chercher "display css" dans Google, et la réponse se trouve dans les 2-3 premiers liens.

Si vous avez d'autres questions, n’hésitez pas.
jeff-roland a écrit :
Bonjour tout le monde,

Pour Lothindil,
la méthode .css de jquery peut avoir cette syntaxe :
$('p').css('color');

cette syntaxe récupère la valeur de "color" et nous la retourne

Il y a aussi cette syntaxe :
$('p').css('color', 'red');

Cette méthode modifie la propriété "color" et la définie à "red"


à part que
if($('p').css('color', 'red'))


Reviens à tester si le changement de propriété "color" défini à "red" s'est bien passé.

Moi je teste si la propriété "color" vaut bien "red", ce qui revient à faire en 2 étapes :

var couleur=$('p').css('color'); //couleur vaudra alors la "color" de "p"
if(couleur=='red') //si la couleur est "red"


Ce qui peut se traduire plus rapidement en testant directement la fonction jquery au lieu d'une variable par :

if($('p').css('color')=='red') //si la couleur est "red"


Alors que votre code revient à :

var test=$('p').css('color','red'); //test vaudra true parce que le changement toujours possible
if(test=='red') //ce qui n'a aucun sens, vu que test vaudra true systématiquement
jeff-roland a écrit :

Pour gc-nomade,
La valeur par défaut de "display" est "inline".

okay, mais cela ne répond à mon interrogation, de quel façon, la valeur block est appliqué ?

via une class à la volée, via un hover, focus, via js ou css, injection dans style="", etc ?... , car il suffit probablement de gérer la cascade de style à cette étape pour faire simple et la condition se fait simplement si le sélecteur, cible quelque chose qui est là.
Lothindil,

Quand tu utilise cette ligne de code :
if($('p').css('color', 'red'))

Tu regardes simplement si la couleur est bien à rouge. Que la couleur était modifié ou pas avant, cela importe peu.

Je n'ai pas testé, mais je pense qu'elle équivaut à cette ligne de code.
if($('p').css('color')=='red') //si la couleur est red
.


gc-nomade,

Pour ton interrogation (je viens de la comprendre), tu peux tout à fait initialiser la valeur du display dans ton CSS, ou dans ton JS. Ca dépend ce que tu veux en faire par rapport à ton script, ou par rapport la la situation.
En fait , j'attendais la reponse de stephane72 qui a son code sous la main Smiley smile .

Les sélecteur sont des conditions,
Une condition peut en écraser une autre.
Pas besoin de if ou de else, ça se fait tout seul coté nav Smiley smile

exemple de mon idée suite a un onclick :
http://codepen.io/gc-nomade/pen/Ebjka

la règle CSS est une une condition à elle seule.
En gros , c'est sa question initiale qui m'interroge, qu'est ce qui le motive , dans le sens ou il y a a gerer pour un même element 2 regle de styles a valeur distincte ?
gc-nomade a écrit :
En fait , j'attendais la reponse de stephane72 qui a son code sous la main Smiley smile .


Désolé pour le retard.Je vais essayer de vous détailler ce qui était mon objectif et ce que j'ai fait.
Voici ici un aperçu de ce que j'ai fais.

Grâce à la fonction tabs de bootstrap j'ai un sub-menu où lorsque l'on clique sur un lien Menu 1 -) link 1,la barre de sous menu reste affiché et lorsque l'on clic sur Menu 2 la barre de sous menu de Menu 1 s'enleve pour faire place a la barre du sous-menu de Menu 2
Désolé pour le retard.Je vais essayer de vous détailler ce qu'était mon objectif et ce que j'ai fait.
Voici ici un aperçu de ce que j'ai fais.

Grâce à la fonction tabs de bootstrap j'ai un sub-menu où lorsque l'on clique sur un lien Menu 1 -) link 1,la barre de sous menu reste affiché et lorsque l'on clic sur Menu 2 la barre de sous menu de Menu 1 s'enleve pour faire place a la barre du sous-menu de Menu 2
Modifié par stephane72 (13 Oct 2013 - 10:35)
Sujet clos
Aller à