Probleme de changement de display via fonction

Hello hello !

j'ai un soucis je m'arrache les cheveux !

architecturalement parlant j'ai ça :

<div id="div1>
</div>
<div id="div2>
</div>

Rien de compliqué
sur DIV2 j'ai des propriété css (margin) et un display none ! (un display none dans une media query). Quand je fais un clic droit inspecter l'élèment je vois le display none dans la partie css. jusque là tout va bien

sur DIV1 j'ai un onclick qui appel une fonction et dans cette fonction j'ai ceci :

	if ((window.innerWidth < 992))  {
		if(elemm_block_form.style.display == "none"){
			elemm_block_form.style.display = "block";
		}else{
			elemm_block_form.style.display = "none"
		}
	}

quand je clic la première fois sur ma DIV1 je passe directement dans le else (c'est là le problème)... Quand je fais un survol de l’élément dans le javascript (mode pas à pas du debuggeur) je vois display:"" alors que dans la partie html/css je vois bien le display none.. bref je comprend pas pk.. du coup ça ne marche pas.

Merci de votre aide.

Plop,

elemm.style.display

renvoie la valeur de display dans le style "inline" (dans le html quoi).
Il ne renvoie donc pas la valeur du display ajouté par le css...

https://jsfiddle.net/2g9jzjLr/1/

et oué c'est bien ce que je me disais !!!

Du coup y'a un moyen de "pointer" directement sur les propriétés css du fichier css ? ou je dois passer obligatoire par des propriétés inline ...

Merci pour ta réponse
Modifié par JENCAL (15 Jan 2016 - 11:13)

Je m'y était déjà frotté et a part passer par getComputedStyle() je vois pas trop... mais c'est pas super joli.
https://jsfiddle.net/2g9jzjLr/2/
Je préfère limite une init de la valeur en js.
Modifié par _laurent (15 Jan 2016 - 11:18)

c'est fou ça... je mettais jamais frotté moi à ce problème jusqu'à aujourd'hui...
Merci pour ta solution c'est bien aimable

Sinon tu pense qu'il existe une solution en Jquery ?

Bonjour,

J'arrive un peu tard pour la version vanilla :

window.getComputedStyle(elemm_block_form,null).display

Et pour Jquery tu peux utiliser :

$(elemm_block_form).is(':visible')

LIEN
Modifié par SolidSnake (15 Jan 2016 - 11:36)

Bonjour,

Peut-être qu'en testant les dimensions des éléments, tu peux en déduire si display:none ou pas.
* In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Bah au pire il suffit juste de tester l’existence de la valeur tout court (et en profiter pour l'initialiser) avant de jouer avec...

if(elemm_block_form.style.display){
   ...
} else {
   elemm_block_form.style.display = 'none';
}

Bonne journée à tous

_laurent a écrit :
Bah au pire il suffit juste de tester l’existence de la valeur tout court (et en profiter pour l'initialiser) avant de jouer avec...

Beurk, c'est sale...
En plus, ne sachant justement pas lire la valeur dans le CSS, qui peut être soit en display:none ou pas (mediaqueries), ton code ne fonctionnera justement pas à un moment donné.
Modifié par SolidSnake (15 Jan 2016 - 14:43)

Salut,

J'avoue avoir lu les résponses de chacun en Z. Ce soir je suis mort. Bref,

@jencal :
Je t'invite à lire cet excellent article.

Ensuite, si tu veux récupérer proprement la valeur css d'un element, ça se passe comme cela :

console.log(window.getComputedStyle(document.querySelector('chemin vers le node'),null).getPropertyValue("margin-right"));