使用函数获取元素的更智能方法
Smarter way to getElementsByClassName with function
我想知道在 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>
您可以实现 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>
如评论之一所述,当您应该将 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");
我想知道在 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>
您可以实现 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>
如评论之一所述,当您应该将 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");