显示/隐藏 div，使用纯 JS答案

【问题标题】：Show/Hide div, with plain JS显示/隐藏 div，使用纯 JS
【发布时间】：2012-12-12 09:40:49
【问题描述】：

我的 CSS：

#a_x200{
    visibility: hidden;
    width: 200px;
    height: 200px;
    background-color: black;
}

我的 JS：

<script type="text/javascript">
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

我的 HTML

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>

不工作，我想我错过了什么！

【问题讨论】：

您在 css 中设置 visibility，但在 js 中更改 display 加上一些语法错误...
#a_x200{display:none;宽度：200 像素；高度：200 像素； background-color: black;} 还是不行
@PoWeR 你能在jsFiddle 中重现问题吗？
参考show or hide dom

标签： javascript jquery html css

【解决方案1】：

试试这个：

document.getElementById('a_x200').style.visibility = 'visible';

【讨论】：

【解决方案2】：

你可以试试这个代码：

HTML Code:
        <div id="a_x200" style="display:none;">asd</div>
        <input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

Java script:

<script type="text/javascript">
function showStuff(id) {
        document.getElementById(id).style.display = "block";
}
</script>

试试这个代码，它会解决你的问题。

【讨论】：

【解决方案3】：

您使用visibility: hidden 隐藏它，然后尝试使用display CSS 属性使其可见。它们是两个完全独立的属性，改变一个不会神奇地改变另一个。

如果要让它再次可见，请将visibility 属性的值更改为visible：

document.getElementById('a_x200').style.visibility = 'visible';

【讨论】：

【解决方案4】：

在这里你可以看到我在 jquery Show/Hide using jquery 创建的一个例子。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

</style>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

【讨论】：

【解决方案5】：

试试这个...

function showStuff(id) {
    document.getElementById(id).style.display = 'block'; // OR
    document.getElementById(id).style.visibility = 'visible'; 
}

编辑

如果您注意到您的按钮，请单击onclick="showStuff('a_x200');"。您已经将 id 作为参数发送给您的函数.. 所以我正在获取参数并使用它。

在你的情况下有参数但没有使用它......虽然它做同样的事情......

或者你可以这样做

<input type="button" class="button_p_1" onclick="showStuff();"></input>  // omitting double 'n'

function showStuff() {
    document.getElementById('a_x200').style.display = 'block';
}  // missing curly bracket

这两者都做同样的事情

【讨论】：

@PoWeR 他重命名了函数上的参数，然后实际传递给document.getElementById()调用。 id 的值将会改变，这取决于您在调用 showStuff() 时作为第一个参数传递的内容。如果你做showStuff('a_x200')（就像你点击按钮时一样），那么id将等于'a_x200'。

【解决方案6】：

你的输入是miss spled

应该是这样的：

我的 JS

<script type="text/javascript">
function showStuff(a_x200) {
        document.getElementById(a_x200).style.display = 'block';
}
</script>

我的 HTML

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

【讨论】：

使用document.getElementById('a_x200') 完全没问题，它只是让函数上的参数完全没有意义。
@PoWeR 在你的函数中也缺少大括号.. :):)
@Anthony Grist 他没有使用传递给他的方法的参数，我对其进行了更改，因此它将 id 作为参数。