Sujet Précédent Sujet Suivant

InnerWidth ne marche pas

Résolu/Fermé
Garig - Modifié le 2 sept. 2017 à 23:32
Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 - 3 sept. 2017 à 15:13
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 sept. 2017 à 13:23
Bonjour,

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

0
Réponse 2 / 4
Garig
3 sept. 2017 à 13:34
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 sept. 2017 à 14:42
Le .resize puisque c'est lors du redimensionnement que tu veux...
0
Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
3 sept. 2017 à 15:13
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
3 sept. 2017 à 13:41
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
Modifié le 3 sept. 2017 à 14:14
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