堆棧內存溢出
  簡體   English   中英

getElementsByClassName不起作用

[英]getElementsByClassName doesn't work

 原文  2015-11-18 02:04:31  2   7    javascript/ jquery

問題描述

我試圖隱藏某些HTML元素onload ，然后顯示和操作它們。 當我將元素的各個ID與getElementById()方法一起使用時，代碼可以正常工作。 但是，當我嘗試使用類更有效地執行此操作時，它將無法工作。 這是代碼： 

<!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>

7 個解決方案

解決方案1
 2 已采納  2015-11-18 02:06:42

您不能像這樣批量應用屬性。 這就是為什么在此類情況下首選使用jQuery的原因： 

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

如果要在沒有jQuery的情況下執行此操作： 

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

解決方案2
 1  2015-11-18 02:07:24

這是因為getElementsByClassName()返回元素的數組形式的對象 。 您需要訪問特定元素才能更改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';
}

解決方案3
 1  2015-11-18 02:07:45

document.getElementsByClassName返回一個數組，該數組沒有“ style”屬性。 您需要遍歷數組： 

    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';
        }
    }

解決方案4
 1  2015-11-18 02:09:09

這里的問題是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";
}

解決方案5
 1  2015-11-18 02:09:46

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

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

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

解決方案6
 1  2015-11-18 02:11:12

您可以使用for循環遍歷getElementsByClassName返回的集合中的所有元素，如下所示： 

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

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

解決方案7
 0  2015-11-18 03:33:34

我在使用此代碼時遇到了困難，因為我不知道如何命名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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 getElementsByClassName似乎不起作用 為什么getElementsByClassName在xhr reponseXML上不起作用 document.getElementsByClassName不起作用 getElementsByClassName在div元素中不起作用 在硒中使用getElementsByClassName時js.executeScript不起作用 getElementsByClassName（）在IE6，IE7，IE8等舊的Internet Explorer中不起作用 getElementsByClassName在IE6上不起作用。 我究竟做錯了什么？ document.getElementsByClassName（&#39;word&#39;）[0] .click（）在h3上有效，但在div上無效 Var無法從document.getElementsByClassName（）獲取元素 for 循環不處理 getElementsByClassName 找到的每個元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM