使用 JavaScript 更改 DIV 可见性

Posted 2023-02-21

【中文标题】使用 JavaScript 更改 DIV 可见性

【英文标题】：changing DIV visibility with JavaScript

【发布时间】：2013-04-14 11:39:21

【问题描述】：

编辑：由于这个问题已经变得非常流行，我将解决这个问题，因此它将成为有效的代码示例。原始问题仍然列出，但代码有效。

我试图在按下按钮后显示一个 div，但这不起作用，知道这是为什么吗？

<form action="insert.php" method="POST" align="right" id="post_form">
<input type="button" value="click me" onClick="show()">
<div id="show_button">  fdsfds </div><br>
</form>

#show_button
 visibility:hidden;


function show()
  // alert("cheked the button - worked");
  document.getElementById("show_button").style.visibility= 'visible' ;

【问题讨论】：

您应该用引号将 id 括起来：document.getElementById("show_button")

@Antony 你是对的，我的朋友，浪费了很多时间......非常感谢上帝保佑你。

【参考方案1】：

将您的 CSS 更改为：

#show_button
 display: none

而你在你的 javascript 中：

function show()
  //alert("cheked the button - worked");
  document.getElementById('show_button').style.display= 'block' ;

【讨论】：

@DavidThomas 是的，我错过了，但是，我更正了我的答案以供进一步参考

【参考方案2】：

错别字将document.getElementById(show_button)改成document.getElementById("show_button")

function show()
  document.getElementById("show_button").style.visibility= "visible" ;

【讨论】：

你能扩展一下这个答案吗？也许解释一下这会做什么？

【参考方案3】：

试试这个：

function show()
  //alert("cheked the button - worked");
  document.getElementById("show_button").style.visibility= "visible" ;

或

function show()
  //alert("cheked the button - worked");
  document.getElementById(show_button).style.display= "inline" ;

【参考方案4】：

document.getElementById(show_button) -: 语法错误，缺少引号“”！

【讨论】：

我没有在任何编辑器中尝试过。总之，我用的是dreamweaver cs 6。