2

我正在编写一些简单的代码来更改单击按钮时图像的可见性，但我document.getElementById().value的出现是undefined. （我尝试用.value-.display相同的结果替换）。

可能是什么问题呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <script>
        function hideImage(imageId){
            document.getElementById(imageId).visibility="hidden";
        }
        function showImage(imageId){
            document.getElementById(imageId).visibility="visible";
        }
        function switchVis(imageId){
            var curVis = document.getElementById(imageId).value;
            if(document.getElementById(imageId).value=="hidden"){
                document.getElementById("output").innerHTML="hidden";
                showImage(imageId);
            }
            else if(document.getElementById(imageId).value=="visible"){
                hideImage(imageId);
                document.getElementById("output").innerHTML="visible";
            }
            else{
                alert("Visibility Issue!\nVisibility value is " + curVis);
            }
        }
    </script>
</head>
<body>
    <img src="images/k3.gif" id="k3"><p>
    <button onclick=switchVis('k3')>Visibility</button>
    <div id="output"></div>
</body>

4

4 回答 4

0
  1. 在 img 标签中添加可见性属性。可见性=“可见”

2.也检查可见性值与以下。

document.getElementById(imageId).style.visibility=="visible"

  1. 在 hideImage 和 showImage 函数中使用相同的东西。
于 2013-08-07T10:13:28.103 回答
0

你可以像这样获得可见性：jsfiddle 所以它在document.getElementById('myId').style.visibility

//使可见
document.getElementById('myId').style.visibility='visible'

//使隐藏
document.getElementById('myId').style.visibility='hidden'

取而代之的是您使用的值 innerHTML。值用于输入元素。

于 2013-08-07T10:04:44.600 回答
0

尝试这个

以显示

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

隐藏

 document.getElementById('k3').style.display='none';

参考这个以获得更好的想法

于 2013-08-07T10:05:03.620 回答
0

您不能简单地style通过使用来获得价值document.getElementById().value。getComputedStyle()给出一个元素的所有 CSS 属性的最终使用值。返回的样式是一个CSSStyleDeclaration对象，可用于获取样式的值。尝试以下代码。它应该工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <script>
    function hideImage(imageId){
        document.getElementById(imageId).style.visibility="hidden";
    }
    function showImage(imageId){
        document.getElementById(imageId).style.visibility="visible";
    }
    function switchVis(imageId){
        var curVis = document.getElementById(imageId); //your element
        style = window.getComputedStyle(curVis); //returns CSSStyleDeclaration object
        curVis = style.getPropertyValue('visibility'); //now get your css value

        if(curVis=="hidden"){
            document.getElementById("output").innerHTML="visible";
            showImage(imageId);
        }
        else if(curVis=="visible"){
            hideImage(imageId);
            document.getElementById("output").innerHTML="hidden";
        }
        else{
            alert("Visibility Issue!\nVisibility value is " + curVis);
        }
    }
 </script>
</head>
<body>
    <img src="images/k3.gif" id="k3" value="check"><p>
    <button onclick="switchVis('k3')">Visibility</button>
    <div id="output"></div>
</body>
于 2013-08-07T10:42:18.083 回答