InnerWidth ne marche pas

Résolu
Garig -  
Garig Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'essaie de changer la couleur de mon titre en dessous de 400px (taille de la fenetre)

Mais ça marche pas... Pouvez-vous m'aider svp? 

<h1>Salut</h1>


var titre=document.querySelector('h1');
if (window.innerWidth < 400 )  {
    titre.style.color="red";
}




4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Commence par faire un console.log de la variable et regarde ce qu'elle te retourne.

0
Réponse 2 / 4
Garig
 
Ok merci de ta réponse

En fait ça marche mais quand je redimensionne la fenetre manuellement, la couleur reste figé dans l'état au moment ou j'ai ouvert la fenetre.

Je vois pas le changement s'effectuer quand je redimensionne manuellement la fenetre en dessous et au dessus de 500px.

Je sais pas du tout ce qu'il faut que je fasse pour ça...
Est ce qu'il faut que je créé une fonction en plus? Et quelle méthode javascript utiliser?

Merci
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Le .resize puisque c'est lors du redimensionnement que tu veux...
0
Garig Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   6 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Ok merci J'ai trouvé la solution. Je marque comme résolu :-) 

	window.addEventListener("resize", function(){
		var titre=document.querySelector('h1');
		if (window.innerWidth > 500 )  {
			titre.style.color="yellow";
		}else{
			titre.style.color="red";
		}
	});
0
Réponse 3 / 4
Garig
 
En fait il faudrait que je puisse recharger la page à chaque instant. Je sais pas quelle méthode javascript utiliser? Si c'est .load() ou .resize()? ou alors les 2 ensembles? As-tu une piste pour m'éclairer?

Merci
0
Réponse 4 / 4
Garig
 
J'ai essayé de faire ça mais ça marche pas 

 window.onload = rafraichir;
 window.onresize = rafraichir;
 function rafraichir(){
  var titre=document.querySelector('h1');
  if (window.innerWidth > 500 )  {
  titre.style.color="yellow";
  }else{
   titre.style.color="red";
  }
  console.log(window.innerWidth)
 }
0