我试图将一个页眉 block 定位到 HTML 页面显示的右侧，实际位置取决于可用窗口的宽度。有一个包含图像的 div 和一个包含下面一行文本“按钮”的 div。
两个 div 都设置了 position: absolute，我想在页面加载后使用 javascript 函数设置 top 和 left。我显然遗漏了一些东西，因为 javascript 对显示没有影响 - 位置总是从样式表中获取(默认零或实际值:我都试过了)。
这是代码，被删减以尝试隔离问题。底部的警报似乎显示左侧值如我所料(在我的测试用例中为 890px)，但实际位置(以及 Firebug 报告的值)为 630px。我在 Firefox 4.0.1 和 Chrome 11 上试过，效果一样。
<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);
}
最佳答案
您确定您在 positionHeaders() 末尾设置的属性是正确的吗？我可能会设置他们的样式；像这样的东西:
document.getElementById("pageheader2a").style.top = "0";
希望对您有所帮助。
关于javascript - 为什么我的 javascript 不重新定位这个标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5910463/