Как применить класс к div на основе ширины div?

Question

Я пытаюсь добавить класс к определенному div в зависимости от его ширины, поэтому он динамически добавляется или удаляется по мере изменения размера всего окна (и, следовательно, div, который имеет процентную ширину).

Я пытался использовать javascript querySelector и offsetWidth для идентификации div, но пока он не работает. Мой метод основан на этой кодовой ручке (которая получает ширину окна, немного отличающуюся от того, что я пытаюсь сделать).

Вот что у меня есть:

   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();

Что мне нужно изменить, чтобы добавить .wide к .v65-productGroup-product, когда .v65-productGroup-product> 414px в ширину?

Answer 1

Может быть, эта ручка помогает:

https://codepen.io/anon/pen/zQXMoz

Я в основном изменил перо, на которое вы ссылались, и добавил нужные вам функции. измените размер страницы, чтобы увидеть эффект.

P.S. в своем коде вы имели в виду:

if (width < 414) {

вместо

if (width < 141) {

Кроме того, если вы просто хотите переключить класс на 414px, то этого должно быть достаточно:

if (width < 414) {
  // remove class
}
else {
  // add class
}

Answer 2

Я сделал эту демонстрацию: посмотрите в полноэкранном режиме и измените ширину браузера

"use strict";
console.clear();

const addWideClass = function() {
  Array.from(document.getElementsByTagName('span')).forEach(el => {
    const w = el.offsetWidth
    el.style.setProperty('--w', `'${w}'`);
    if (w < 141) {
      el.classList.remove("wide");
    } else if (w >= 415) {
      el.classList.add("wide");
    }
  })
};

window.addEventListener('resize', addWideClass)
addWideClass()

div {
  display: flex;
}
div span {
  box-sizing: border-box;
  padding: 10px;
  --w: '213232';
}
div span:nth-child(1) {
  flex-grow: 2;
  flex-basis: 0;
  background-color: gold;
}
div span:nth-child(2) {
  flex-grow: 3;
  flex-basis: 0;
  background-color: silver;
}
div span:nth-child(3) {
  flex-grow: 4;
  flex-basis: 0;
  background-color: goldenrod;
}
div span.wide {
  border: 10px solid #000;
}
div span:before {
  content: var(--w);
  display: block;
}

<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>

PS Возможно, вы захотите рассмотреть отладку события resize (я использовал секунду в качестве задержки отладки, чтобы сделать эффект более заметным.скорее хотите задержку отката в 100 миллисекунд или тому подобное)

"use strict";
console.clear();

const addWideClass = function() {
  Array.from(document.getElementsByTagName('span')).forEach(el => {
    const w = el.offsetWidth
    el.style.setProperty('--w', `'${w}'`);
    if (w < 141) {
      el.classList.remove("wide");
    } else if (w >= 415) {
      el.classList.add("wide");
    }
  })
};

// From: https://davidwalsh.name/javascript-debounce-function
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};


window.addEventListener('resize', debounce(addWideClass, 1000))
addWideClass()

div {
  display: flex;
}
div span {
  box-sizing: border-box;
  padding: 10px;
  --w: '213232';
}
div span:nth-child(1) {
  flex-grow: 2;
  flex-basis: 0;
  background-color: gold;
}
div span:nth-child(2) {
  flex-grow: 3;
  flex-basis: 0;
  background-color: silver;
}
div span:nth-child(3) {
  flex-grow: 4;
  flex-basis: 0;
  background-color: goldenrod;
}
div span.wide {
  border: 10px solid #000;
}
div span:before {
  content: var(--w);
  display: block;
}

<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>

Answer 3

Смещение OffWidth может быть обналичено или пропустило перекомпоновку. Поставщики браузеров могут выбрать способ обработки DOM-вычислений, например offsetWidth .

Как вы говорите: общее окно (и, следовательно, div, который имеет процентную ширину), изменяет размер ,Вы можете изменить эту строку для определения ширины окна вместо ширины div:

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || screen.width

Тогда вы можете иметь типичные точки останова устройства .Если вам действительно нужно изменить его, когда div равен 141 и 415 пикселям, вам нужно использовать математические навыки, чтобы вычислить, насколько широким должно быть окно, исходя из одного из этих значений, добавленных к остальным значениям ширины и процентных факторов, которые вы знаете о соседних элементах..