JavaScript中的document.getElementsByClassName

我使用引導程序3發出了兩條警報消息。每條警報均爲div，並帶有類警報。JavaScript中的document.getElementsByClassName

我想在類添加褪色和到每個警報，使他們結束時消失。

爲什麼下面的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">×</button> Message</div> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Message</div> </body> </html>

來源

2015-06-17 sam

，因爲它已經有一個類，alert，然後由剛串聯字符串

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

註釋添加更多的你在那裏沒有空間，你可以做

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

這不是一個很好的解決方案，或者在現代瀏覽器，你可以做

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

或者寫你的函數，它一定程度上是相同的，還有上MDN一個填充工具會爲你做的。

另請注意，您正在嘗試訪問DOM中可用的元素之前，您需要移動腳本標記或使用DOM就緒處理程序，但最重要的是您需要在某些情況下打開控制檯不起作用。

來源

2015-06-17 19:49:03 adeneo

您需要將腳本放在元素之後。將您的新類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>

時，您還需要一個空間

來源

2015-06-17 19:49:59 Turnip

JavaScript中的document.getElementsByClassName

回答

相關問題