Question

我试图让脚本向用户询问HTML类名和颜色名，然后将该HTML类的所有元素的颜色设置为给定的颜色。

我将html设置为class = wish，并且li元素设有class = class2。 sytax是正确的。我只是不知道该怎么做。我一直只是使用document.getElementsByClassName()功能进行测试，但对我来说效果不佳。

/*var classask=window.prompt("which class?");
var nodes = getElementsByClassName(classask);
document.writeln(nodes);*/

var styx=window.prompt("pick a classes name so for usage");
var nodes =document.getElementsByClassName(styx);
document.write(nodes);
nodes.style.color=red;
//document.write(document.getElementsByClassName(styx));
//document.writeln(x);
//document.write(document.getElementByClass(styx));
HTMLElement.Object.className=styx;
document.writeln(styx);

//var newcolor=window.prompt("pick a new color for usage");
//var nodes=(document.getElementByClass(classname));
//HTMLElementObject.className=styx;
//nodes.style.color=newcolor;

代码基本上是我自己完成的很多测试，我只是不确定如何让它工作。我要么在没有做任何事情的地方得到它，要么总是说[object HTMLCollection]总是无论我放入什么。

Answer 1

document.getElementsByClassName()返回nodeList。这是一个节点列表。要对nodeList中的所有节点进行操作，您必须遍历nodeList并将更改应用于nodeList中的每个项目，如下所示：

var newcolor = window.prompt("pick a new color for usage");
if (newcolor !== null) {
    var nodes = document.getElementsByClassName(classname);
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].style.color = newcolor;
    }
}

仅供参考，当getElementByClass时，您还有getElementsByClassName。

Answer 2

NodeList 没有style属性。您必须遍历 NodeList 中的 HTMLElementNodes （它非常类似于数组）并依次访问每个属性的style属性。

带有类名的简单Javascript

2 个答案: