JavaScript中的document.getElementsByClassName

Question

我使用Bootstrap 3发出了两个警报消息。每个警报都是一个带有class alert的div 。

我想淡入和类添加到每个警报，使他们结束时消失。

为什么下面的JS脚本不起作用？ 谢谢。

var alerts = document.getElementsByClassName("alert");
for (var i = 0; i < alerts.length; i++) {
  alerts[i].className += "fade in";
}

我尝试使用jQuery，并且有效。

$(document).ready(function() {
  $('.alert').addClass('fade in');
});

错误代码：

 <!DOCTYPE html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript"> var alerts = document.getElementsByClassName("alert"); for (var i = 0; i < alerts.length; i++) { alerts[i].className += "fade in"; } </script> </head> <body> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Message</div> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Message</div> </body> </html>

Answer 1

因为它已经有一个类别，所以alert ，然后只需将其连接到字符串即可添加更多内容

"alert" + "fade in" === "alertfade in";

请注意，您在其中没有空间，您可以这样做

alerts[i].className += " fade in";

这不是一个很好的解决方案，或者在现代浏览器中，您可以

alerts[i].classList.add('fade');
alerts[i].classList.add('in');

或编写功能大致相同的函数， MDN上有一个polyfill可以为您完成。

还要注意，您试图在DOM中使用元素之前先访问它们，要么需要移动脚本标签，要么使用DOM ready处理程序，但是最重要的是，当某些操作不起作用时，打开控制台。

Answer 2

您需要将脚本放置在元素之后。 在添加新的类alerts[i].className += " fade in";时，您还需要一个空格。 alerts[i].className += " fade in"; class alerts[i].className += " fade in";

 <!DOCTYPE html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Message</div> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Message</div> <script type="text/javascript"> var alerts = document.getElementsByClassName("alert"); for (var i = 0; i < alerts.length; i++) { alerts[i].className += " fade in"; } </script> </body> </html>

JavaScript中的document.getElementsByClassName

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-06-17 19:49:03

解决方案2
1 2015-06-17 19:49:59

JavaScript中的document.getElementsByClassName

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-06-17 19:49:03

解决方案2 1 2015-06-17 19:49:59

解决方案1
3 已采纳 2015-06-17 19:49:03

解决方案2
1 2015-06-17 19:49:59