Stu*_*ent 8 html javascript arrays
我正在尝试编写一个程序来收集a中的所有类名div,将它们存储在一个array并将它们全部推回到DOM,blue最后调用一个类,这就是HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>some title</title>
<style>
.blue{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="someClass otherClass" id="box"></div>
<button id="btn">click</button>
</body>
</html>
问题是,我知道如何获取内部的所有类名div,甚至如何在该div中推送blue(btn点击)以及我收集的其他值,但为什么不出现蓝框？我错过了什么？
var domManipulation = function(){
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
var class_list = [];
if(box.classList.length > 0){
for(var i = 0; i < box.classList.length; i++){
class_list.push(box.classList[i]);
}
}
btn.addEventListener('click', function(){
class_list.push("blue");
box.classList.add(class_list);
console.log(class_list);
});
}();
这是一个JsBin,我不能使用jQuery btw.
Sho*_*omz 10
这就是问题:
box.classList.add(class_list);
您无法添加完整的类数组,因为它们最终以逗号分隔.
var domManipulation = function() {
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
var class_list = [];
if (box.classList.length > 0) {
for (var i = 0; i < box.classList.length; i++) {
class_list.push(box.classList[i]);
}
}
btn.addEventListener('click', function() {
class_list.push("blue");
class_list.forEach(function(e){
box.classList.add(e);
})
console.log(class_list);
});
}();#box {height: 50px; background: #eee}
#box.blue {background: blue}<div class="someClass otherClass" id="box"></div>
<button id="btn">click</button>