Question

我使用隐藏属性在我的html页面中隐藏了一个图像。但我无法通过document.getElementById("check").style.visibility="visible";的java脚本看到它我的代码是

   <html>
<head>
<style type="text/css">
</style><script type="text/javascript">
function myFunction()
{
document.getElementById("check").style.visibility="visible";
}
</script>
</head>
<body>
<table> 
<img class="hide" src="check.jpg" id="check" hidden="true" height="300" width="400">
<tr>
<td>
<img src="1.jpeg" onclick="myFunction()">
</td>

Answer 1

你实际上忘记在函数中为该变量赋值

function myFunction() {
    document.getElementById("check").style.visibility = "visible";
}

您还必须删除隐藏属性并删除“隐藏”类

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className = ele.className.replace(reg,' ');
}
function myFunction() {
    var ele = document.getElementById("check");
    ele.style.visibility = "visible";
    ele.hidden = "";
    removeClass(ele, "hide");

}

Answer 2

如果您要将hidden="true"设置为隐藏它，则需要取消设置此属性以再次显示该元素。

<html>
<head>
<style type="text/css">
</style><script type="text/javascript">
function myFunction()
{
    document.getElementById("check").hidden = '';
}
</script>
</head>
<body>
<table> 
<img class="hide" src="check.jpg" id="check" hidden="true" height="300" width="400">
<tr>
<td>
<img src="1.jpeg" onclick="myFunction()">
</td>

Answer 3

您需要更改并应用visibility CSS。

function myFunction()
{
    document.getElementById("check").style.visibility = "visible";
}

最好使用脚本设置加载时的可见性。

document.getElementById("check").style.visibility = "hidden";

有时，当您在CSS中定义时，它不起作用。

Answer 4

<html>
<head>      
    <script type="text/javascript">
        function myFunction()
        {
            document.getElementById("check").style.visibility="visible";
        }
    </script>
</head>
<body>
    <table> 
        <img  src="check.jpg" id="check" hidden="true" height="300" width="400" style="visibility:hidden;"/>    
        <tr>
            <td>
                <img src="1.jpeg" onclick="myFunction()">
            </td>
        </tr>
    </table>
</body>

图像无法动态显示

4 个答案: