Question

我正在尝试将页面标题块放在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);       
}

Answer 1

您确定positionHeaders()末尾设置的属性是否正确？我可能会设置他们的风格;类似的东西：

document.getElementById("pageheader2a").style.top = "0";

希望有所帮助。

为什么我的javascript没有重新定位此标题？

1 个答案: