为什么我的javascript不能重新定位这个标题？
为什么我的javascript不能重新定位这个标题？
提问于 2011-05-06 19:04:43
我正在尝试将一组页眉定位到HTML页面显示的右侧，实际位置取决于可用窗口的宽度。有一个包含图像的div和下面包含一行文本“button”的div。
两个div都设置了position: absolute，我想在页面加载后使用javascript函数设置top和left。我显然遗漏了一些东西，因为javascript对显示没有影响-位置总是从样式表中获取的(默认的零或实际值:我都试过了)。
这就是代码，删减以尝试隔离问题。底部的警告似乎显示左边的值和我预期的一样(在我的测试用例中是890px)，但实际位置(Firebug报告的值)是630px。我已经在Firefox4.0.1和Chrome11上试过了，效果也一样。
<body onload="javascript:positionHeaders()">
<div id="pageheader">
<div id="pageheader1a">
x
</div>
<div id="pageheader1b">
x
</div>
<div id="pageheader2a">
<img src="../images/memooirs2_320x58.png" class="nonhreflink"
onclick="prepareIndexDisplay()" />
</div>
<div id="pageheader2b">
<span class="smallbutton" onclick="processLogout()">Logout</span><span class="smallbutton" onclick="prepareHelp()">Help</span><span class="smallbutton" onclick="prepareTour()">Take a tour</span>
</div>
</div>
</body>
#pageheader {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 80px;
border-bottom: 1px solid rgb(50,50,50);
background-image: url("../images/headerbkg.png");
background-repeat: repeat-x;
background-position: top;
}
#pageheader1a {
position: absolute;
top: 0;
left: 0;
}
#pageheader1b {
position: absolute;
top: 63px;
left: 0;
}
#pageheader2a {
position: absolute;
top: 0;
left: 630px;
}
#pageheader2b {
position: absolute;
top: 63px;
left: 630px;
}
.smallbutton {
position: relative;
margin: 0 5px 0 5px;
border: 0;
padding: 0;
font-size: 0.8em;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
color: rgb(50,50,50);
}
function positionHeaders() {
var lWidth = 0, lHeight = 0;
if(typeof(window.innerWidth) == 'number') { //Non-IE
lWidth = window.innerWidth;
lHeight = window.innerHeight;
}
else if(document.documentElement && (document.documentElement.clientWidth ||
document.documentElement.clientHeight)) { //IE 6+ standards compliant mode
lWidth = document.documentElement.clientWidth;
lHeight = document.documentElement.clientHeight;
}
else if(document.body && (document.body.clientWidth ||
document.body.clientHeight)) { //IE 4 compatible
lWidth = document.body.clientWidth;
lHeight = document.body.clientHeight;
}
var z1 = String(lWidth - 550);
document.getElementById("pageheader2a").top = "0";
document.getElementById("pageheader2a").left = z1 + "px";
document.getElementById("pageheader2b").top = "63px";
document.getElementById("pageheader2b").left = z1 + "px";
alert("2bleft=" + document.getElementById("pageheader2b").left);
}回答 1
Stack Overflow用户
发布于 2011-05-06 19:19:04
您确定在positionHeaders()末尾设置的属性是正确的吗？我可能会改为设置它们的样式；类似于：
document.getElementById("pageheader2a").style.top = "0";希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5910463
复制相关文章
相似问题
腾讯云开发者
