为什么我设置了一个图片元素以及他的大小，边框，为什么没有显示出来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模仿短信对话</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
#div1 {
width: 300px;
height:300px;
border: 1px solid red;
position: absolute;
}
#div2{
width: 240px;
height: 200px;
border:1px solid black;
padding: 10px;
margin: 10px auto}
#div3{float: left}
#button{height: 40px;width: 60px;
margin-left: 20px}
#text{ height: 40px;width:150px;line-height: 20px;
margin-left: 40px}
#img1{height: 20px;width: 20px;border: 1px solid black;
}
</style>
<script>
window.onload=function oo(){
var oDiv2=document.getElementById("div2");
var oBtn1=document.getElementById("button1");
var oText=document.getElementById("text");
var oImg=document.getElementById("img1");
var arrUrl=["img1.jpg","img2.jpg"]
var num=0
oBtn1.onclick=function(){
num=0;
oImg.src=arrUrl[num];
oDiv2.innerHTML=oText.value;
oText.value="";
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
<div id="div3">
<img id="img1">
<input id="text" type="text">
<input id="button1" type="button" value="发送">
</div>
</div>
</body>
</html>
sgbb88浏览 1599回答 2
2回答
-
陈士愚
var oImg = document.getElementById("img1"); var arrUrl = ["img1.jpg", "img2.jpg"]; var num = 0; oBtn1.onclick = function() { num = 0; oImg.src = arrUrl[num]; oDiv2.innerHTML = oText.value; oText.value = ""; }; 我摘出来的这段代码，是你用来设置图片的。可以看到，你的html代码中本身没有为#img1设置src属性，js代码里也没有初始化，只在#button1的点击事件里设置了为图片改变src属性；所以页面刚打开的时候，img1位置肯定是空白的；你的代码逻辑和你标题描述的现象是符合的。 当你点击发送按钮时，出发click事件，这时候为oImg对象（即#img1）设置src属性，并且因为每次重置num=0，所以始终使用arrUrl[0]（img1.jpg）。 所以如果你的想法是默认开始的时候显示img2.jpg，当点击发送时显示img1，那么可以这么写： <script> window.onload = function oo() { var oDiv2 = document.getElementById("div2"); var oBtn1 = document.getElementById("button1"); var oText = document.getElementById("text"); var oImg = document.getElementById("img1"); var arrUrl = ["img1.jpg", "img2.jpg"]; var num = 1; oImg.src = arrUrl[num]; // 默认显示img2.jpg，当用户点击发送时，更换为img1.jpg oBtn1.onclick = function() { num = 0; oImg.src = arrUrl[num]; oDiv2.innerHTML = oText.value; oText.value = ""; }; }; </script> -
陈士愚
var arrUrl=["img1.jpg","img2.jpg"]，路径地址里只有文件名，图片确实和html文件处于一个目录下么？
随时随地看视频慕课网APP
Html/CSS