使用函数获取元素的更智能方法

Question

我想知道在 javascript 和 css 之间是否有更聪明的方法来处理 classes。据我了解， "only" / select 具有相同 class 的所有元素的最常见方法是制作一个 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";

我想我最终想做的是找到一种更具可读性和更干的方式来编辑 class 名称的元素。编辑：感谢您的片段。我尝试使用一些已被推荐的代码。但是好像还是不行:

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

请参考工作片段。

  var elems;

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

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

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

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

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

Answer 2

如评论之一所述，当您应该将 getClassName 作为变量传递时，您将其作为字符串传递。去掉双引号应该可以正常工作。

但是，您将无法按照现在的方式修改样式属性，因为您的函数没有 return 元素。如果您要做的是根据 class 名称批量更改背景颜色，我建议将颜色名称添加为第二个变量：

 //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");

使用函数获取元素的更智能方法

Smarter way to getElementsByClassName with function

javascript

css

function

getelementsbyclassname