Question

我想知道是否有更聪明的方法来处理javascript和css之间的类。正如我所说，选择具有相同类的所有元素的“唯一”/最常见的方法是通过进行for循环： jsfiddle.net/JoshuaChronstedt/obk92sh6/2/

var elems = document.getElementsByClassName("helloClass");

for (var i = 0; i < elems.length; i++) {
   elems[i].style.background = "red";
}

是否可以创建一个函数来保存for循环？我是js的菜鸟，似乎无法使它工作： jsfiddle.net/JoshuaChronstedt/obk92sh6/6/

function getClass(getClassName) {
    var elems = document.getElementsByClassName("getClassName");
    for (var i = 0; i < elems.length; i++) {
        elems[i];
    }
}

getClass("helloClass").style.background = "red";

getClass("helloClassTwo").style.background = "blue";

我想我最终要做的是找到一个更可读，更干的方法来按类名编辑元素。编辑：谢谢你的片段。我已经尝试使用一些已经过了的代码。但它似乎仍然不起作用：

function getClass(getClassName) {
  Array.from(document.querySelectorAll('.' + '\'' + getClassName + '\'')).forEach(e => e);
}

getClass(helloClass).style.background = 'yellow';

getClass(helloClassTwo).style.color = 'red';

<div class="helloClass">
  hello class
</div>

<div class="helloClass">
  hello class
</div>


<div class="helloClassTwo">
  hello class Two
</div>

<div class="helloClassTwo">
  hello class Two
</div>

Answer 1

您可以实现map函数迭代。map函数迭代数组中的元素。因此，您需要首先使用Array.from()方法

将普通对象更改为数组

var elems;

function getClass(getClassfuncCont) {
   return document.getElementsByClassName(getClassfuncCont);
}

elems = getClass("helloClass");
Array.from(elems).map(element=>element.style.background = "red");

请参阅工作片段。

＆＃13;

  var elems;

function getClass(getClassfuncCont) {
   return document.getElementsByClassName(getClassfuncCont);
}

elems = getClass("helloClass");
Array.from(elems).map(element=>element.style.background = "red");

＆＃13;

<div class="helloClass">
  hello class
</div>

<div class="helloClass">
  hello class
</div>

<div class="helloClass">
  hello class
</div>

＆＃13;

Answer 2

正如其中一条评论中所提到的，当你将它作为变量传递时，你将getClassName作为字符串传递。拿走双引号应该可以使它发挥作用。

但是，您现在无法像现在这样修改样式属性，因为您的函数不会返回元素。如果您要做的是根据类名批量更改背景颜色，我建议将颜色名称添加为第二个变量：

 //renaming the function so it's more representative
   function colorBackgroundByClass(getClassName,color) {
        var elems = document.getElementsByClassName(getClassName);
        for (var i = 0; i < elems.length; i++) {
            elems[i].style.background = color;
        }
    }

    colorBackgroundByClass("helloClass","red");

    colorBackgroundByClass("helloClassTwo","blue");

使用函数更智能地获取getElementsByClassName

2 个答案: