1
votes

Comment modifier la valeur d'une propriété de classe css pour une requête multimédia spécifique?

J'ai la classe

.foo {
  width: 30px;
}
@media only screen and (max-width:768px){
   .foo {
     width: 20px;
   }
}

Et je veux changer la valeur de width de 20px à 15px avec javascript pour la mediaquery uniquement. Quand je le fais, cela change la classe pour toutes les résolutions en réduisant la requête média dans le CSS.

javascript html css media-queries

3 commentaires

vérifiez window.innerWidth puis modifiez la largeur en utilisant document.getElementsByClassName ("foo"). style.width = "15px"

ne pouvez-vous pas changer directement dans le CSS? pourquoi avez-vous besoin de le faire via javascript?

Vous pouvez utiliser un écouteur de requête multimédia. Voir developer.mozilla.org/en-US/docs/Web / API / MediaQueryList /… .

4 Réponses :

1
votes

Vous pouvez essayer ceci:

if (window.matchMedia("(max-width: 768px)").matches) {
  document.querySelector('.foo').style.width = "15px";
}

0 commentaires

0
votes

Vous ne pouvez pas modifier le css de requête multimédia, mais vous pouvez créer une propriété css et définir la propriété à l'aide de javascript.

De cette façon, cela n'affecte que le CSS dans la requête multimédia.

<div class="foo">Foo</div>

.foo {
  width: 30px;
  background-color: salmon;
  
  --mobile-width: 20px;
}

@media only screen and (max-width:768px){
   .foo {
     width: var(--mobile-width);
   }
}

const foo = document.querySelector('.foo');

setTimeout(() => {
  // This doesn't affect anything if the window width is above 768px
  foo.style.setProperty('--mobile-width', '15px');
}, 2000);

1 commentaires

Merci pour votre réponse! J'y ai pensé mais la valeur que je dois définir n'est pas dans un ensemble de constantes. Cela peut être n'importe quel entier. Je vais vous expliquer ce que j'ai fait ci-dessous.

1
votes

Je suggérerais de créer une classe distincte en CSS pour cette résolution et d'ajouter ce style à cette balise si nécessaire:

      if (window.matchMedia("(max-width: 768px)").matches) {
          document.querySelector('.foo').classList.Add("newClass"); }

0 commentaires

0
votes

Ce que j'ai fait pour contourner le problème. J'ai utilisé un auditeur sur matchMedia et chaque fois que le navigateur franchit la limite, j'exécute une routine JS pour définir la valeur de mes éléments (trouvée par le nom de classe css). De cette façon, cela fonctionne comme une requête multimédia, mais la valeur changeante peut être n'importe quoi.

                var w = 50; // Can change
                // media query event handler
                if (matchMedia) {
                    const mq = window.matchMedia("(max-width:768px)");
                    mq.addListener(WidthChange);
                    WidthChange(mq);
                }

                function WidthChange(mq) {
                    if (mq.matches) {

                        // window width is less than 768px
                        changeFoo('foo', 20);


                    } else {

                        // window width is at least 768px

                        changeFoo('foo', w);

                    }
                }


               function changeFoo(aClass, value) {
                        var c = document.getElementsByClassName(aClass);
                        for(i=0; i < c.length; i++) {
                          c[i].style.width = value + 'vw';
                        }
               }

0 commentaires