Question

我正在尝试创建一个最初隐藏的图像 - 但是一旦文档通过JavaScript文件完全加载就会显示出来。

$(document).ready(function () {
    document.getElementById("theImage").style.visibility = "visible";
});

#theImage {
    visibility:hidden;
}

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">

<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>

</head>
<body>
	<div class="gridContainer clearfix">
		<div id="theImage">
        <img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
        </div>
      
      <div id="div1" class="fluid">
        <h1>Bio for Kami Nelson</h1>
        <p>Text</p>
        </div>
	</div>
</body>
</html>

为什么这不起作用？

提前谢谢。

Answer 1

你应该包括jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或使用原生window.onload()代替$(document).ready()

window.onload=function () {
    document.getElementById("theImage").style.visibility = "visible";
}

Answer 2

您缺少jQuery库参考
你不对使用选择器选择身份theImage的图像。
theImage应该是img代码。

<强>的JavaScript

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
    $("#theImage").css('display':'block');
});
</script>

<强> CSS

#theImage {
    display: none;
}

<强> HTML

<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>

Answer 3

为什么不在窗口加载时绘制图像？给你的形象一个id我将使用＆＃34; image＆＃34;对于这个例子。

<script>
window.onload = function () 
{
$('#image').css({"display":"block";});
}
</script>

页面加载后通过javascript显示图像

3 个答案: