javascript - getElementById().value 返回未定义

标签 javascript dom

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

可能是什么问题?

<!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>

最佳答案

您不能简单地使用 document.getElementById().value 获取 style 值。 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>

关于javascript - getElementById().value 返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18100068/

相关文章:

php - 检测下载是否完成

javascript - 从img标签中获取(blob)的图片数据(与URL.createObjectURL相反的方法)

java - 将 AmCharts 导出为 PNG、JPG 等

Javascript:如何加入所有链接(数组)

javascript - 书架更改列数据类型

javascript - 如何通过知道节点的值来访问dom && 通过只知道值来获取accordion的索引

javascript - 如何将 PHP 变量传递给 jQuery 中的 Datepicker?

javascript - jQuery:窗口调整大小功能问题

javascript - 从 DOM 中删除一个类也会将其从变量中的项目中删除

css - 在 selenium IDE 中查找字体粗细值