InnerWidth ne marche pas

Résolu
Garig -  
Garig Messages postés 83 Statut Membre -
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 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    Bonjour,

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

    0
  2. 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 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      Le .resize puisque c'est lors du redimensionnement que tu veux...
      0
      1. Garig Messages postés 83 Statut Membre 6 > jordane45 Messages postés 30427 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
  3. 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
  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