如何根据 div 宽度将类应用于 div？

Question

我正在尝试根据其宽度将类添加到特定 div，因此它会随着整个窗口（以及具有百分比宽度的 div）调整大小而动态添加或删除。

我尝试使用 javascript querySelector 和 offsetWidth 来识别 div，但到目前为止它不起作用。我的方法受到this codepen 的启发（它获取窗口宽度，与我尝试做的略有不同）。

这是我目前所拥有的：

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

当 .v65-productGroup-product > 414px 宽时，我需要进行哪些更改才能将 .wide 添加到 .v65-productGroup-product？

Answer 1

offsetWidth 可能被兑现或错过了回流。 Browser vendors may choose how to handle DOM calculations like offsetWidth.

正如您所说：整个窗口（以及因此具有百分比宽度的 div）调整大小。您可以更改此行以检测窗口宽度而不是 div 宽度：

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

那么你就可以拥有typical device breakpoints。如果您真的需要在 div 为 141 和 415 像素时更改它，您需要使用您的数学技能来计算窗口的宽度，从这些值之一添加到您知道的相邻元素的其余宽度和 procentual 因素.

Answer 2

也许这支笔有帮助：

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

我基本上修改了您提到的笔并添加了您想要的功能。更改页面大小以查看效果。

附：在您自己的代码中，您的意思是：

if (width < 414) {

而不是

if (width < 141) {

?

此外，如果您只想在414px 上切换课程，那么这就足够了：

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

Answer 3

我做了这个演示：在全页视图中查看并更改浏览器宽度

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

附：您可能需要考虑对 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>