11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Condition 'if' ne fonctionne pas

Salut

Dans ma quête de me passer de jQuery, je cherche maintenant à remplacer ce script :
function fermermenu() {
if ( $('#menumobile').css('display') == 'table' )
$('.rubrique').slideToggle( "slow" );
if ( $('#menumobile').css('display') == 'table' )
$('.pagemenu').slideToggle( "slow" );
}

par ce script :
function fermermenu() {
if ( document.getElementById('menumobile').style.display === 'table' ) {
	var x = document.getElementsByName('menu');
	for (var i= 0; i<x.length; i++) { x[i].style.display = 'none'; }
	}
}


Mais la condition 'if' ne semble pas vouloir fonctionner !

En effet, si j'enlève la fonction 'if", le code s’exécute.

Si, pour test, je met 'none' à la place de 'table', rien ne se passe non plus !

Si je met !='none', le code s’exécute tout le temps ! (comme si le résultat renvoyé était vide)
Pourtant le css de #menumobile est bien défini dès le départ (voir https://monplombier27.fr/) (je fais mes tests dans la vue adaptative de Firefox)

Pourquoi ça fait ça ? Heeeeelp !
Modifié par kerlutinoec (19 May 2021 - 13:42)
reBonjour

En cherchant sur le ouèbe, j'ai trouvé des cas similaires de problèmes.

J'ai pu résoudre mon problème en utilisant 
getComputedStyle()
au lieu de 
getElementById().style.display


Au final ça donne ça :
function fermermenu() {
var element = document.getElementById('menumobile'),
    style = window.getComputedStyle(element),
    display = style.getPropertyValue('display');
if ( display == 'table' ) {
	var x = document.getElementsByName('menu');
	for (var i= 0; i<x.length; i++) { x[i].style.display = 'none'; }
	}
}


C'est dommage que l'autre méthode ne marche pas ; elle est plus simple.
Pourquoi en est-il ainsi ?

La vache c'est compliqué le javascript !
Meilleure solution
Hello

pour accéder au display d'un élément par son ID tu peux faire comme cela : 

document.getElementById('yourid').style.display;
C'est ce que j'ai voulu faire dans un premier temps et ça n'a pas marché ! (voir toute l'explication dans le premier message)
Le CSS est en début de fichier HTML (car une seule page avec cet aspect).

Ca ne marche qu'avec le CSS intégré sous forme de 
style=""
dans la div ???
document.getElementById('menumobile').style.display

va lire dans le DOM (dans le HTML)

Si tu met ton display dans un fichier css il ne sera pas lisible par javascript,
SI tu met ton display dans en tant qu'attribut, inline, dans le html alors ça marchera

<div id="menumobile" style="display:none">

document.getElementById('menumobile').style.display // fonctionne
Ça aurait du marcher alors (et ce ne fut pas le cas) car mon CSS est en début de fichier HTML entre <style> et </style>. C'est bizarre.
Oui, le javascript n'as accès qu'aux document , ce qu'on appel le DOM (document objet model),
et le dom correspond à TOUT le HTML.
Modifié par JENCAL (27 May 2021 - 10:16)
Non, ce qui se trouver dans <style> dans le head (ou dans une feuille de style externe) n'est pas lu par le javascript DOM. uniquement le style qui se trouve dans l'attribut direct d'un élément html Smiley decu

pour cela, tu as raison il faut utiliser getComputedStyle et non .style sur un element du DOM en js
Modifié par JENCAL (27 May 2021 - 11:31)
Si, tout le <html> est parcoure, car on peut récupérer les <meta> qui sont dans le <head> par exemple..

c'est juste les balises <style> qui ne sont pas parcourent. qu'elles soient dans le <body> OU dans le <head> elle ne seront pas lu.

le reste des balises html oui.
Sujet clos
Aller à