J'essaie d'ajouter une classe à une division spécifique en fonction de sa largeur, elle est donc ajoutée de manière dynamique ou supprimée en tant que fenêtre globale (et donc la DIV, qui a une largeur de pourcentage) redimensionne.
J'ai Essayé d'utiliser JavaScript QuerySelector et OffseSetWidth pour identifier la DIV, mais jusqu'à présent, cela ne fonctionne pas. Ma méthode est inspirée par ce codePEN (qui obtient la largeur de la fenêtre, si légèrement différente de ce que je "m Essayer de faire). P>
Voici ce que j'ai jusqu'à présent: p>
var addWideClass = function() {
var width = document.querySelector('.v65-productGroup-product').offsetWidth;
if (width < 141) {
$('.v65-productGroup-product').removeClass('wide');
} else if (width >= 415) {
$('.v65-productGroup-product').addClass('wide');
};
};
$(window).resize(function(){
addWideClass();
});
addWideClass();
3 Réponses :
La vitrine offset peut être encaissée ou avoir manqué une refusion. Les fournisseurs de navigateurs peuvent choisir comment gérer les calculs DOM comme OffsetWidth .
Comme vous dites: la fenêtre globale (et donc la DIV, qui a une largeur de pourcentage) redimensionne . Vous pouvez modifier cette ligne pour détecter la largeur de la fenêtre à la place de la largeur de div: alors vous pouvez avoir Points d'arrêt typiques de périphérique . Si vous en avez vraiment besoin pour modifier lorsque DIV est de 141 et 415 pixels, vous devez utiliser vos compétences mathématiques pour calculer la large de l'une de ces valeurs ajoutées au reste des largeurs et des facteurs procèsuels que vous connaissez des éléments de Neigbouring. .
Peut-être que ce stylo aide:
https://codepen.io/anon/pen/zqxmoz p>
J'ai essentiellement modifié le stylo que vous avez mentionné et ajouté la fonctionnalité que vous vouliez. Modifiez la taille de la page pour voir l'effet. P>
P.s. Dans votre propre code, avez-vous voulu dire: p> au lieu de p> " p> , si vous voulez simplement basculer la classe sur 414px code>, cela devrait suffire: P> if (width < 414) {
// remove class
}
else {
// add class
}
J'ai fait cette démonstration: voyez-la en mode complète de la page et modifier la largeur du navigateur
p>
<div> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora similique vitae accusantium repellat nobis architecto unde, exercitationem soluta placeat voluptatum nostrum beatae tenetur ad deleniti voluptate quia quis officia voluptatem.</span> <span>At ex velit eligendi ipsam doloribus doloremque laudantium, minus mollitia dicta quis sit nostrum commodi incidunt autem provident vero! Rem distinctio, optio harum deserunt aperiam corporis. Quod maxime eos porro!</span> <span>Quaerat, quo adipisci voluptas dolores odio maxime maiores obcaecati repellendus ducimus a cupiditate placeat, fugiat nostrum distinctio quidem nemo rem error laborum ipsam eos dicta corrupti. Nobis iure suscipit saepe.</span> </div>
Pourquoi ne pas définir les cours qui considèrent la fenêtre? Jetez un coup d'œil à développeur.mozilla.org/en/docs/web/ CSS / Media_Quiseries / ...
Qu'est-ce qui fonctionne jusqu'à présent? pouvez-vous consoler.log () la largeur et si vous obtenez le bon numéro. Vérifiez ces réponses pour plus d'informations sur OffsetWidth vs Clientwidth vs innerwidth vs outerwidth Stackoverflow.com/a/21064102/1376843Stackoverflow.com/a/17845094/1376843
@schlonzo Parce que la largeur de fenêtre n'est pas égale largeur d'élément
@schlonzo: Qu'est-ce que Yunzen a dit, mais aussi, je ne peux pas éditer le code HTML dans ce cas, donc si je ajoute des cours puis appliquer des requêtes de média à eux, je dois toujours les ajouter avec JS ... et je peux que Il suffit de résoudre le problème directement, c'est ma pensée.