InnerWidth ne marche pas

Résolu
Garig -  
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

  1.  jordane45 Modérateur
    Bonjour,

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

    0
    1. 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
      1. jordane45 Modérateur
        Le .resize puisque c'est lors du redimensionnement que tu veux...
        0
      2. Garig
        @jordane45Ok 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
    2. 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
      1. 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