Question

    <body>
    <input type="textbox" id="fname"></input>
    <button type="button" onclick="javascript:show('select'); return false;">Click</button></br>
    <input type="radio" id="select" style="display:none;"></input>
</body>

我写的代码似乎是合乎逻辑的，但在这种情况下，当我点击按钮它似乎没有工作..任何人告诉我哪里可能出错

提前感谢。

    <head>
    <title>show and hide javascript</title>
    <script type="text/javascript">
        function show(id) {
            //alert("Its working");
            var myId = document.getElementById.id;
            if (myId.style.display = 'none') {
                myId.style.display = 'block';
            } else {
                myId.style.display = 'none';
            }

        }
    </script>
</head>

Answer 1

我发现你的功能存在三个问题：

1）在此行中将=更正为==：

if (myId.style.display == 'none') {

2）改变这个：

document.getElementById.id;

使其成为实际的函数调用：

document.getElementById(id);

3）使用跨浏览器getStyle()功能，以便您的样式值包含CSS设置，而不仅仅是直接在对象上设置的内容。直接从对象读取样式属性，仅检索直接在对象上设置的样式值，而不检索默认值。它也不会反映通过CSS设置的内容。您可以实现一个跨浏览器函数来获取样式属性，包括通过this article中的CSS设置的内容：

function getStyle(el, cssprop){
    if (el.currentStyle) //IE
        return el.currentStyle[cssprop]
    else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
        return document.defaultView.getComputedStyle(el, "")[cssprop]
    else //try and get inline style
        return el.style[cssprop]
}

然后，您可以像这样实现您的功能：

    function show(id) {
        //alert("Its working");
        var myId = document.getElementById(id)
        if (getStyle(myId, "display") === "none") {
            myId.style.display = 'block';
        } else {
            myId.style.display = 'none';
        }
    }

此外，由于您的功能实际上是一个切换，而不仅仅是一个节目，我建议将其重命名为toggle()。您可能还想知道这只能与块元素一起正常工作。如果你在内联元素上尝试它，它会隐藏它，但是当它显示它时，它会将内联元素转换为块元素。

Answer 2

document.getElementById(id)  // without the dot before parens

这个代码似乎可以正常使用我们没有双==建议。直到更改（id）并删除点才会起作用。

<html><head><title>test</title></head>
<body>

<script type="text/javascript">
        function show(id){
            //alert("Its working");
            var myId=document.getElementById(id);
            if(myId.style.display=='none'){
                myId.style.display='block';
            }
            else{
                myId.style.display='none';
            }

        }
    </script>

<h1>Test</h1>

<input type="textbox" id="fname"></input>
    <button type="button" onclick="javascript:show('select'); return false;">Click</button></br>
    <input type="radio" id="select" style="display:none;" />

</body>
</html>

Answer 3

   function show(id) {
        //alert("Its working");
        var myId = document.getElementById(id);
        if (myId.style.display == 'none') {
            myId.style.display = 'block';
        } else {
            myId.style.display = 'none';
        }

    }

FTFY

Answer 4

更改此行：如果（myId.style.display = '无'）{

为：

if(myId.style.display==='none'){

用javascript显示和隐藏

4 个答案: