html可见性样式;不起作用

html visibility style doesn't work

本文关键字：不起作用 样式 可见性 html      更新时间：2023-09-26

我有一个奇怪的问题。我有一个按钮，"下一个按钮"，我想在最初隐藏，但当一个复选框被点击时，它应该会出现。下面的代码不起作用，也没有给出任何错误。我已经在IE9和FireFox 13上测试过了我搜索了其他问题，但找不到我遇到的问题。。。

<html>
<head>
<script language="javascript">
        function enableNext() {
            alert("clicked");
            var s1 = document.getElementsByName("NextButton");
            s1.style.visibility = "visible";
        } 
    </script>
</head>
<body>
<input type="submit" name="NextButton" value="Next" style="visibility:hidden;"/>
<input type="checkbox" onClick="enableNext()" />
</body>
</html>

在代码中返回一个数组，并将样式应用于数组。将其更改为以下代码。

 function enableNext() {
            alert("clicked");
            var s1 = document.getElementsByName("NextButton")[0];//Get the first and only button in your case
            s1.style.visibility = "visible";
        }

document.getElementsByName返回一个匹配元素的数组，您必须对其进行循环并更改数组中各个项目的样式。您可以使用jQuery轻松地处理它$("[name='NextButton']").css("visibility", "visible")，或者如果您想使用css display属性，您可以使用$("[name='NextButton']").show()或.hide()。此外，如果你不想使用jQuery，你可以只使用一个id，而不是使用getElementsByName使用getElementById，它将返回你需要的单个元素。

您应该在HTML元素中使用id，然后使用document.getElementById()。这将给出精确匹配的元素。

<script language="javascript">
        function enableNext() {
            alert("clicked");
            var s1 = document.getElementById("NextButton");
            s1.style.visibility = "visible";
        } 
</script>

<input type="submit" id="NextButton" name="NextButton" value="Next" style="visibility:hidden;"/>

我想您应该尝试使用css，而不是单独使用javascript。

尝试使用

document.getElementsByName("NextButton")[0];
相关文章：