getElementsByClassName不起作用

我嘗試隱藏一些HTML元素onload然後顯示並操作它們。當我使用getElementById()方法使用元素的個人ID時，代碼正常工作。但是，當我嘗試更有效地使用類時，它不起作用。以下是代碼：getElementsByClassName不起作用

<!DOCTYPE html> 
<html>  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
</head> 

<body onload="HideModals()"> 
    <p id="p1" class="MyModal99">1. I will disappear or not.</p> 
    <p id="p2" class="MyModal99">2. I will disappear or not.</p> 
    <button id="toggle">Toggle</button> 
    <button id="hide">Hide</button> 

    <script> 
    $(document).ready(function(){ 
     $("#toggle").click(function(){ 
      $("#p1").toggle(); 
     }); 

     $("#hide").click(function(){ 
      $("#p2").hide(); 
     }); 
    }); 
    </script> 

    <script> 
    function HideModals() { 
     //document.getElementById("p1").style.display = 'none'; 
     //document.getElementById("p2").style.display = 'none'; 
     document.getElementsByClassName("MyModal99").style.display = 'none'; 
    }  
    </script> 
</body> 
</html>

來源

2015-11-18 Ash

爲什麼不堅持到jQuery的，而不是用那種香草混合呢？ – lifetimes

您不能像這樣批量應用屬性。這就是爲什麼使用jQuery最好的事情是這樣的：

$('.MyModal99').css('display', 'none');

如果你想做到這一點沒有jQuery的：

var nodes = document.getElementsByClassName("MyModal99"); 
for(var i = 0; i < nodes.length; i++) { 
    nodes[i].style.display = 'none'; 
}

來源

2015-11-18 02:06:42 Macmee

這是因爲getElementsByClassName() returns an array-like object of elements。您需要訪問特定元素才能更改style對象。

你可以遍歷元素：

var elements = document.getElementsByClassName("MyModal99"); 
Array.prototype.forEach.call(elements, function (el) { 
    el.style.display = 'none'; 
});

或：

var elements = document.getElementsByClassName("MyModal99"); 
for (var i = 0; i < elements.length; i++) { 
    elements[i].style.display = 'none'; 
}

來源

2015-11-18 02:07:24

document.getElementsByClassName返回一個數組，其中沒有一個「風格」屬性。您需要迭代這個數組：

function HideModals() { 
     //document.getElementById("p1").style.display = 'none'; 
     //document.getElementById("p2").style.display = 'none'; 
     var modals = document.getElementsByClassName("MyModal99"); 
     for (var i=0; i < modals.length; i++) { 
      modals[i].style.display = 'none'; 
     } 
    }

來源

2015-11-18 02:07:45 TAGraves

的這裏的問題是，document.getElementsByClassName("MyModal99")返回項的列表，所以你通過他們必須循環和應用的性能一次一個。事情是這樣的：

var elements = document.getElementsByClassName("MyModal99"); 
for (var e in elements) { 
    e.style.display = "none"; 
}

如果您需要支持舊的瀏覽器，這樣做的老式方法沒有for..in循環：

var elements = document.getElementsByClassName("MyModal99"); 
for (var i = 0 ; i < elements.length ; ++i) { 
    elements[i].style.display = "none"; 
}

來源

2015-11-18 02:09:09 jaggedsoft

那是因爲document.getElementsByClassName返回節點的數組。您需要迭代每個返回的節點以分別設置其樣式。

var eleArray = document.getElementsByClassName('MyModal99'); 

for(var i = 0; i < eleArray.length; i++) { 
    eleArray[i].style.display = 'none'; 
}

來源

2015-11-18 02:09:46

您可以通過所有getElementsByClassName方法這樣返回的集合中的元素使用for循環週期：

var results = document.getElementsByClassName("MyModal99"); 
for (var i = 0; i < results.length; i++) { 
    results[i].style.display = 'none'; 
}

工作演示：http://jsfiddle.net/gratiafide/3qg308bq/2/

來源

2015-11-18 02:11:12 user3089840

我有困難與此代碼因爲我不知道如何命名jQuery函數。現在我明白了。以下是更正代碼：

<!DOCTYPE html> 
<html>  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script> 
</head> 
<body onload="HideModals()"> 
<p id="p1" class="MyModal99">1. I will disappear or not.</p> 
<p id="p2" class="MyModal99">2. I will disappear or not.</p> 
<button id="toggle">Toggle</button> 
<button id="hide">Hide</button> 
<script> 
    $(document).ready(function(){ 
    $("#toggle").click(function(){ 
    $("#p1").toggle(100); 
    }); 
    $("#hide").click(function(){ 
    $("#p2").hide(100); 
    }); 
    }); 
    function HideModals() { 
     $('.MyModal99').css('display', 'none'); 
    }  
</script>

來源

2015-11-18 03:33:34 Ash

getElementsByClassName不起作用

回答

相關問題