通过类名不工作获取元素

Question

对不起，如果我是一个noob，但这行代码不会为我工作的某种原因，它看起来是正确的。

$(window).load(function() { 
    document.getElementByClassName("example").style.width = "50%"; 
    setTimeout(function() { 
     document.getElementByClassName("example").style.width = "50%"; 
    }, 3000); 
}); 

Answer 1

正确的函数名是getElementsByClassName，注意复数形式。

document.getElementsByClassName("example")[0].style.width = "50%"; 
//Just an example for how to set the property for the first element 
//we have to iterate over that collection and set property one by one 

此外，它会产生一个node list，所以我们必须遍历它来设置properties它。

var elems = document.getElementsByClassName("example"); 
for(var i=0;i<elems.length;i++){ 
    elems[i].style.width = "50%"; 
} 

另请注意，node list不是array。它的数组像对象。人们通常把它们看作一个数组，他们会尝试使用它的数组函数。这会导致错误。如果你想把它转换成一个数组，那么在EC6中有一个方便的函数，我们可以使用它。

var arr = Array.from(document.getElementsByClassName("example")); 

上面的代码将变换node list到array。

Answer 2

你有$(window)这意味着你正在尝试利用jQuery。如果您尝试使用jQuery，请确保它包含在您的页面中。以下列方式编写会更容易：

$(window).load(function() 
{ 
$(".example").css('width',"50%"); 

setTimeout(function() { 
    $(".example").css('width', "50%"); 
}, 3000); 

}); 

Answer 3

getElementsByClassName是复数。反对寻找身份证的人通常会得到不止一个答案。因此，将您的代码更改为：

$(window).load(function() 
{ 
    document.getElementsByClassName("example").style.width = "50%"; 

    setTimeout(function() { 
     document.getElementsByClassName("example").style.width = "50%"; 
    }, 3000); 
}); 

将为您提供正确的结果。