使用 javascript 调整 div 的大小和位置
我正在尝试对显示 ajax 加载图像的 div 元素进行简单的大小调整和重新定位。 它加载的内容可以更改大小，因此我希望将 div 元素的大小调整为父元素的大小，在本例中，父元素是 id 为“thEngineCategories”的表维度。
function resize_divProgress() {
var control = document.getElementById('thEngineCategories');
var div = document.getElementById('divProgress');
div.style.left = control.offsetLeft + 'px';
div.style.top = control.offsetTop + 'px';
div.style.width = control.offsetWidth + 'px';
div.style.height = control.offsetHeight + 'px';
}
以下是我的 javascript，它在
div.style.left = control.offsetLeft + 'px';
说“div.style is undefined”时出错。 这里出了什么问题？
html中的div如下：
<div class="overlay" id="divProgress">
js函数调用如下：
<th id="thEngineCategories" onmouseover="resize_divProgress()" >
CSS是：
.overlay
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 300px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
opacity: 0.75;
filter: alpha(opacity=75);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
有没有更好的方法来处理我想做的事情？
I'm trying to do a simple resize and reposition of a div element that shows a ajax loading image. The content it loads can change size, so I want the div element to resize to be the size of the parent, which in this case is a table dimension with the id "thEngineCategories".
function resize_divProgress() {
var control = document.getElementById('thEngineCategories');
var div = document.getElementById('divProgress');
div.style.left = control.offsetLeft + 'px';
div.style.top = control.offsetTop + 'px';
div.style.width = control.offsetWidth + 'px';
div.style.height = control.offsetHeight + 'px';
}
The following is the javascript I have and it errors on
div.style.left = control.offsetLeft + 'px';
saying "div.style is undefined". Whats wrong here?
The div in html is as follows:
<div class="overlay" id="divProgress">
The js function is called as follows:
<th id="thEngineCategories" onmouseover="resize_divProgress()" >
The CSS is:
.overlay
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 300px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
opacity: 0.75;
filter: alpha(opacity=75);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
Is there a better way to handle what I'm trying to do?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我根据您提供的代码创建了一个基本测试页面，但无法重现该问题。 这表明您的页面中发生了其他事情导致了您所看到的行为。
您能否将您的页面精简到能够演示 JavaScript 错误的最小情况？ 您会发现执行此过程通常会揭示错误的原因 - 您将删除某些内容，它将开始工作，表明删除的代码部分中的某些内容是问题的根源:)
I created a basic test page from the code you provided and couldn't reproduce the problem. This suggests there is something else going on in your page that is causing the behaviour you are seeing.
Could you take your page and pare it down to a minimal case that demonstrates the JavaScript error? You'll find performing this process often will reveal the cause of the error - you'll remove something and it will start working, indicating that something in that removed section of code is the source of the problem :)
div.style.width 不是访问 div 宽度的有效属性。
分别使用 div.offsetWidth 和 div.offsetHeight 作为宽度和高度。
div.style.width is not valid property for accessing width of div.
use div.offsetWidth and div.offsetHeight for width and height respectively.