Javascript 如何循环和缩短代码

我有类似的代码，但只是有点不同。如何缩短以下代码

下面的示例

var sms = document.getElementsByClassName("class-two");
sms.forEach(function(e) {
  e.style.width = 200 + 'px';
});

var sms = document.getElementsByClassName("class-one");
sms.forEach(function(e) {
  e.style.height = 100 + 'px';
});

上面的区别仅在于

一级

和

二级

以及两行

e.style.width=200+'px'和
e.style.height=100+'px'，我可以在这里使用循环吗？如何使用
 遵循，您可以编写一个函数来封装冗余代码：

function setWidth(cls, attr, pixels) {
  Array.from(document.getElementsByClassName(cls)).forEach(function(e) {
    e.style[attr] = pixels + 'px';
  });
}
setWidth("class-two", "width", 200);
setWidth("class-one", "height", 100);

遵循，您可以编写一个函数来封装冗余代码：

function setWidth(cls, attr, pixels) {
  Array.from(document.getElementsByClassName(cls)).forEach(function(e) {
    e.style[attr] = pixels + 'px';
  });
}
setWidth("class-two", "width", 200);
setWidth("class-one", "height", 100);

使用
Array#forEach
并创建一个可以使用类、样式属性和值调用的函数

function setThings(cls, attr, value) {
    [].forEach.call(document.getElementsByClassName(cls), function(el) {
        el.style[attr] = value;
    });
}
setThings("class-two", 'width', '200px');
setThings("class-one", 'height', '100px');

但是，即使在解决了问题之后，仍会滥用
forEach

[].forEach.call(document.getElementsByClassName("class-two"), function(e) {
  e.style.width = '200px';
});

[].forEach.call(document.getElementsByClassName("class-one"), function(e) {
  e.style.height = '100px';
});

实际上是较短的代码，除非函数（setThings）使用单个字符命名，否则第一个答案较短，使用
数组#forEach
并创建一个可以使用类、样式属性和值调用的函数

function setThings(cls, attr, value) {
    [].forEach.call(document.getElementsByClassName(cls), function(el) {
        el.style[attr] = value;
    });
}
setThings("class-two", 'width', '200px');
setThings("class-one", 'height', '100px');

但是，即使在解决了问题之后，仍会滥用
forEach

[].forEach.call(document.getElementsByClassName("class-two"), function(e) {
  e.style.width = '200px';
});

[].forEach.call(document.getElementsByClassName("class-one"), function(e) {
  e.style.height = '100px';
});

实际上是较短的代码，除非函数（setThings）用一个字符命名，否则第一个答案较短
在执行时直接在元素上设置CSS样式被认为是不好的做法，而且没有必要。通过智能地使用CSS，您可以大大简化代码，将JS的数量减少到一行，以便在更高级别的元素上切换类，从而驱动子元素的宽度或高度，从而消除对循环或函数的任何需要。您将拥有更少的代码来编写、调试和维护。本质上，不是自己在JS中查找具有特定类的所有元素，而是让CSS引擎这样做，这就是它的谋生之道


constTopElement=document.getElementById（'top'）；
const buttonElement=document.getElementById（'button'）；
函数toggle（）{topElement.classList.toggle（'shown'）；}
ButtonneElement.addEventListener（“单击”，切换）
.class-one、.class-two{宽度：300px；高度：16px；}
.class 1{背景：红色；}
.class二{背景：蓝色；}
一类{宽度：200px；}
.窄.第二类{高度：100px；}

切换（Toggle）
直接在元素上设置CSS样式被认为是不好的做法，而且没有必要这样做。通过智能地使用CSS，您可以大大简化代码，将JS的数量减少到一行，以便在更高级别的元素上切换类，从而驱动子元素的宽度或高度，从而消除对循环或函数的任何需要。您将拥有更少的代码来编写、调试和维护。本质上，不是自己在JS中查找具有特定类的所有元素，而是让CSS引擎这样做，这就是它的谋生之道


constTopElement=document.getElementById（'top'）；
const buttonElement=document.getElementById（'button'）；
函数toggle（）{topElement.classList.toggle（'shown'）；}
ButtonneElement.addEventListener（“单击”，切换）
.class-one、.class-two{宽度：300px；高度：16px；}
.class 1{背景：红色；}
.class二{背景：蓝色；}
一类{宽度：200px；}
.窄.第二类{高度：100px；}

切换
@qxz答案似乎是最好的。
但如果要避免函数调用，请参考以下内容：

[].forEach.call(document.querySelectorAll('.class-two,.class-one'), function(e) {
  if (e.className.includes("class-two")) {
    e.style.width = "200px";
  };
  if (e.className.includes("class-one")) {
    e.style.height = "100px";
  };
});

一个适合你的答案似乎是最好的。
但如果要避免函数调用，请参考以下内容：

[].forEach.call(document.querySelectorAll('.class-two,.class-one'), function(e) {
  if (e.className.includes("class-two")) {
    e.style.width = "200px";
  };
  if (e.className.includes("class-one")) {
    e.style.height = "100px";
  };
});

A为您
而不是
e.style.width=200+'px'使用
e.style.width='200px'-保存3个字符（x2=6）-在第二个
sms=
还有4个字符之前删除
var
。。。10所以FargetElementsByCassName不是数组，所以没有foreach为什么要直接在所有这些元素上设置宽度？用例是什么？只要明智地使用CSS类，几乎可以肯定，您要做的任何事情都可以更容易地完成。本质上，它们是参数化计算，这正是你想要的。同意，@torazaburo。。。这里的上下文是什么？而不是
e.style.width=200+'px'使用
e.style.width='200px'-保存3个字符（x2=6）-在第二个
sms=
还有4个字符之前删除
var
。。。10所以FargetElementsByCassName不是数组，所以没有foreach为什么要直接在所有这些元素上设置宽度？用例是什么？只要明智地使用CSS类，几乎可以肯定，您要做的任何事情都可以更容易地完成。本质上，它们是参数化计算，这正是你想要的。同意，@torazaburo。。。此文档的上下文是什么？
document.getElementsByClassName
返回一个
HTMLCollection
，该集合不包含
forEach
method@MasterBob-我甚至没有注意到有问题的
forEach
的错误使用！！请注意，
Array.from
对于ES5非常新，我们可以编写函数setWidth（cls，attr，pixels）{Array.prototype.slice.call（document.getElementsByClassName（cls））.forEach（函数（e）{e.style[attr]=pixels+'px'；}）}True，或者只是一个
for
循环。
document.getElementsByClassName
返回一个
HTMLCollection
，该
循环不包含
forEach
method@MasterBob-我甚至没有注意到有问题的
forEach
的错误使用！！请注意，
Array.from
对于ES5非常新，我们可以编写函数setWidth（cls，attr，pixels）{Array.prototype.slice.call（document.getElementsByClassName（cls））.forEach（函数（e）{e.style[attr]=pixels+'px'；}）}True，或者只是一个
for
循环。我不认为这在语义上等同于OP提供的代码