Menu

InnerWidth ne marche pas [Résolu]

Garig - 2 sept. 2017 à 23:31 - Dernière réponse : Garig 64 Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention
- 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";
}




Afficher la suite 

Votre réponse

6 réponses

jordane45 21182 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 26 mai 2018 Dernière intervention - 3 sept. 2017 à 13:23
0
Merci
Bonjour,

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

Commenter la réponse de jordane45
0
Merci
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
jordane45 21182 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 26 mai 2018 Dernière intervention - 3 sept. 2017 à 14:42
Le .resize puisque c'est lors du redimensionnement que tu veux...
Garig 64 Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention > jordane45 21182 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 26 mai 2018 Dernière intervention - 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";
}
});
Commenter la réponse de Garig
0
Merci
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
Commenter la réponse de Garig
0
Merci
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)
}
Commenter la réponse de Garig