做getElementsByClassName(等类似的功能getElementsByTagName和querySelectorAll)的工作方式相同getElementById,还是他们返回元素的数组？
我问的原因是因为我试图改变所有元素的样式getElementsByClassName.见下文.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
我想要...
我认为这段代码可以工作,但由于某种原因它在第一个实例之后打破了循环,并且元素的类名永远不会改变.没有框架请.
function example()
{
var elementArray;
elementArray = document.getElementsByClassName("exampleClass");
for(var i = 0; i < elementArray.length; i++)
{
// PERFORM STUFF ON THE ELEMENT
elementArray[i].setAttribute("class", "exampleClassComplete");
alert(elementArray[i].className);
}
}
编辑(最终答复) - 这是最终产品以及我如何在我的网站中实施@ cHao的解决方案.目标是在页面上抓取各种时间戳并将其更改为时间.谢谢大家的帮助,我从这个问题中学到了很多东西.
function setAllTimeAgos()
{
var timestampArray = document.getElementsByClassName("timeAgo");
for(var i = (timestampArray.length - 1); i >= 0; i--)
{
timestampArray[i].innerHTML = getTimeAgo(timestampArray[i].innerHTML);
timestampArray[i].className = "timeAgoComplete";
}
}
我正在使用JavaScript执行一个小文本,getElementsByClassName()并且我得到了一些不需要的结果.我希望脚本将每个CSS类更改为一个新类.问题是每个其他班级只会改变......
我想使用纯js这个问题是如何用于练习目的.
我想到的第一件事就是白色空间,虽然在移除它时没有任何不同.
谁能指出我做错了什么？
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>
<script>
var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
blockSet[0].className = "block-selected";
blockSet[1].className = "block-selected";
blockSet[2].className = "block-selected";
blockSet[3].className = "block-selected";
blockSet[4].className = "block-selected";
blockSet[5].className = "block-selected";
blockSet[6].className = "block-selected";
blockSet[7].className = "block-selected";
</script>
</body>
</html>
CSS类:
.block-default {
width: 100px;
height:50px;
background-color: green;
border: 1px solid red;
padding:10px;
} …以下javascript代码无法正常运行。（我使用的是IE9，不能使用其他浏览器或JQuery）：
var elems = document.getElementsByClassName("EditableTextBox");
for (var i = 0; i < elems.length; i++) {
elems[i].className = "Zero";
}
发生的情况是，只有某些具有className“ EditableTextBox”的元素被更改为className“ 0”，许多元素仍保留为className“ EditableTextBox”。没有其他代码可能会导致此问题。此代码是刷新屏幕之前我执行的代码的最后一部分。
我认为问题出在.getElementsByClassName找不到所有正确的元素，但是：
var elems = document.getElementsByClassName("EditableTextBox");
for (var i = 0; i < elems.length; i++) {
elems[i].value = "test";
}
这段代码确实将所有正确元素的值更改为“ test”，因此.getElementsByClassName确实可以找到所有元素。
我不明白是什么引起了这里的问题。下面是我的解决方法，但是在这里有更多经验的人可以解释为什么第一段代码不起作用吗？谢谢。
如果有人感兴趣，我的解决方法：
var elems = document.getElementsByTagName("input");
for (var i = 0; i < elems.length; i++) {
if (elems[i].className == "EditableTextBox")
elems[i].className = "Zero";
谢谢。