定位出现问题，用的都是JS
有这么两个图层，我用JS把JS查询后台得到的结果加到图层里。如果单独是这个的话，没问题
关键是我又加了个小窗口的图层，是JS定时查询后台，得到结果以小窗口形式显示，每当小窗口出来后就会影响到原先的图层，原先的图层好像移动了，位置发生了改变，是不是我的那些属性写得不太对
<div class=div_cont>
<div id="result"></div>
<div id="paging"></div>
</div>
不用细看，就看看那些图层，找了半天，不明白为什么
- HTML code
<%@ page language="java" pageEncoding="UTF-8"%><%if(request.getParameter("name")==null) response.sendRedirect("dl.jsp");String name=request.getParameter("name");session.setAttribute("name",name); %><html><head><title>31231</title><script type='text/javascript' src="${pageContext.request.contextPath}/dwr/engine.js"></script><script type='text/javascript' src="${pageContext.request.contextPath}/dwr/util.js"></script><script type='text/javascript' src="${pageContext.request.contextPath}/dwr/interface/searchService2.js"></script><script type='text/javascript' src="${pageContext.request.contextPath}/dwr/interface/searchService.js"></script><style type="text/css">.div_cont { width: 1000px; float: left; margin: 10px;}#result { width: 800px; float: left; margin-top: 5px;}#paging { width: 800px; float: left; margin-top: 5px;}</style><script language="javascript"> var request; var minpage; var maxpage; var startindex; var hasnext; function doSearch(type) { var result = document.getElementById("result"); var pagingdiv = document.getElementById('paging'); result.innerHTML = ""; pagingdiv.innerHTML = ""; if (type != 'paging') { var startindexinput = document.getElementById('startindex'); startindexinput.value = "1"; } request = { startindex : 1, query : "" }; DWRUtil.getValues(request); //DWREngine.setAsync(true); if (request.query == "") { alert("请输入正确的词"); } else { searchService.getSearchResults(request, fillPage); } //DWREngine.setAsync(false); } function fillPage(data) { // alert(DWRUtil.toDescriptiveString(data, 2)); var resultdiv = document.getElementById('result'); var pagingdiv = document.getElementById('paging'); resultdiv.innerHTML = ""; pagingdiv.innerHTML = ""; if (data.length == 0) { resultdiv.innerHTML = "<span>sorry, we can't find what you want...</span>"; return; } if (null != data) { for ( var i = 0; i < data.length; i++) { //alert(data[i].id); var results = data[i]; //alert(results); var ele = document.createElement('div'); ele.setAttribute('id', 'info' + i); ele.innerHTML = "<span>loading..</span>"; resultdiv.appendChild(ele); var res = document.getElementById('info' + i); //res.innerHTML="<font color=\"#0033CC\">" + title[i] + "</font><br /><a href=\"" + url[i] + "\">" res.innerHTML = "<a href=\"" + data[i].url + "\">" + "<font color=\"#0033CC\">" + results.title + "</font></a><br /><font color=\"#008000\">" + data[i].content + "</font><br /><br /><br />"; //searchService.getSearchResultById(list[i],fillDetailResult); //res.innerHTML=id[i]; //res.innerHTML=data[i].url+data[i].title+data[i].content+data[i].id; resultdiv.appendChild(res); } } minpage = data[0].minpage; maxpage = data[0].maxpage; //minpage=data.startpage; //maxpage=data.endpage; startindex = data[0].startindex; hasnext = data[0].hasnext; if (minpage != 1) { var link = document.createElement('a'); link.setAttribute("href", "javaScript:paging('" + ((minpage - 11) * 10 + 1) + "')"); link.innerHTML = "first 10 pages<<"; } for ( var j = minpage; j <= maxpage; j++) { if ((j - 1) * 10 + 1 != startindex) { var link = document.createElement('a'); link.setAttribute("href", "javascript:paging('" + ((j - 1) * 10 + 1) + "')"); link.innerHTML = " " + j + " "; pagingdiv.appendChild(link); } else { pagingdiv.innerHTML += (" " + j + " "); } } if (hasnext == 1) { var link = document.createElement('a'); link.setAttribute("href", "javascript:paging('" + (maxpage * 10 + 1) + "')"); link.innerHTML = ">>last 10 pages"; pagingdiv.appendChild(link); } } function paging(newindex) { document.getElementById('startindex').value = newindex; doSearch('paging'); } function handlekey() { if (document.getElementById('query').value == '') return; var intkey = -1; if (window.event) { intKey = event.keyCode; if (intKey == 13) { doSearch(''); } } } window.onload = init; function init() { var time = window.setInterval(search2, 10000); } function search2() { searchService2.getSearchResults(filldiv); } function filldiv(data) { show(data); } var isshow = 0;//0小窗口没有显示，1小窗口已显 function creatediv() { var msgw, msgh, bordercolor; msgw = 300;//提示窗口的宽度 msgh = 300;//提示窗口的高度 var msgObj = document.createElement("div"); msgObj.setAttribute("id", "msgDiv"); msgObj.style.position = "absolute"; msgObj.style.background = "#fff"; msgObj.style.overflow = "auto"; msgObj.style.left = "900px"; msgObj.style.bottom = "10px"; msgObj.style.width = msgw + "px"; msgObj.style.height = msgh + "px"; msgObj.style.zIndex = "10001"; document.body.appendChild(msgObj); } function delWinD() { document.getElementById("msgDiv").style.display = "none"; isshow = 0; } function show(data) { isshow = 1; if (!document.getElementById("msgDiv"))//小窗口不存在 { creatediv(); mes(data); } else { mes(data); document.getElementById("msgDiv").style.display = ""; document.getElementById("msgDiv").style.bottom ="10px"; //document.getElementById("msgDiv").style.top = (document.documentElement.clientHeight / 4) // + "px"; } } function mes(data) { var msgObj = document.getElementById('msgDiv'); msgObj.innerHTML = ""; msgObj.innerHTML = "这是弹出的小窗口！<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>"; if (data.length == 0) { msgObj.innerHTML = "<span>sorry, we can't find what you want...</span>"; return; } if (null != data) { for ( var i = 0; i < data.length; i++) { var results = data[i]; var ele = document.createElement('div'); ele.setAttribute('id', 'info' + i); msgObj.appendChild(ele); var res = document.getElementById('info' + i); res.innerHTML = "<a href=\"" + data[i].url + "\">" + "<font color=\"#0033CC\">" + results.title + "</font></a><br /><font color=\"#008000\">" + data[i].content + "</font><br /><br /><br />"; msgObj.appendChild(res); } } }</script></head><body><input type="hidden" name="startindex" id="startindex" value="1"><div id="searchbar"><table align="center"> <tr align="center"> <td><img alt="" src=""></td> </tr> <tr align="center"> <td><input size="50" type="text" name="query" id="query" value="" onkeyup="handlekey()"> <input type="button" value="Search" id="search" onclick="javascript:doSearch('')"></td> </tr></table></div><hr><div class=div_cont><div id="result"></div><div id="paging"></div></div></body></html>
[解决办法]
firebug 审查元素
可以查看并修改 属性 和任意样式
你会发现问题所在的