Question

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               document.getElementsByClassName("abc").style.display="block";
            }
    </script>
</body>
</html>

//在上面的代码行中，我最初隐藏了带有类名abc的div，但是点击按钮我要显示div但是点击按钮所需的div不会来。

Answer 1

document.getElementsByClassName返回多个元素而不仅仅是一个元素。你必须使用这样的东西：

document.getElementsByClassName("abc")[0].style.display="block";

由于abc，此语句仅影响具有类[0]的第一个元素，如果您有多个元素与该类，并且您想要全部显示它们，则必须迭代document.getElementsByClassName("abc")的结果并修改每个元素。

Answer 2

函数getElementsByClassName()返回一个元素数组。要访问您的元素，您必须迭代函数返回的所有元素，或者您可以通过指定所需的ID来访问单个项目：

function ok() {
   document.getElementsByClassName('abc')[0].style.display = 'block';
}

Answer 3

document.getElementsByClassName（ “ABC”）的style.display = “块”;

要

document.getElementsByClassName（ “ABC”）[0] = .style.display “块”;

Answer 4

document.getElementsByClassName("abc")将返回一个HTMLCollection数组，因此它没有样式属性。

您可以改为使用document.querySelector(".abc")。

它现在几乎可以在所有浏览器上运行

Answer 5

document.getElementsByClassName("abc")

返回一个数组。因此，您需要像以下一样访问它：

document.getElementsByClassName("abc")[0]

已编辑的代码段：

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               document.getElementsByClassName("abc")[0].style.display="block";
            }
    </script>
</body>
</html>

Answer 6

getelementbyclassname将始终选择具有提供的类名的每个元素，因为概念上类应该应用于多个元素。所以要选择第一个元素使用[0]，如getelementbyclassname[0]

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div><br>
   
    <script>
            function ok(){
               document.getElementsByClassName("abc")[0].style.display="block";
            }
    </script>
</body>
</html>

Answer 7

如果你的项目引用了jquery，那么你也可以使用它的函数show()，hide()

实施例

$(document).ready(function(){
$("button").click(function(){
    $(".abc").hide(1000);
});
});

show()，hide()函数使用一个可选参数来动画显示或隐藏div（在我的示例中为1000）

Answer 8

我认为您需要在div中使用ID，因为页面中存在多个类但ID只使用一次。

见这里

<!doctype html>
<html>
<head>
    <style>
        div#abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div id="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               var x = document.getElementById("abc");
               x.style.display="block";                        
            }
    </script>
</body>
</html>

单击按钮无法显示div

8 个答案: