var ele=document.getElementById('first');
ele.style.left=x;(x是之前计算出的)
ele.style.top=y;
ele.style.display="block";
用js修改div的显示和位置,
但是他的显示是可以设置成功,
也就是说
ele.style.display="block";成功执行了,
但是ele.style.left=x;和ele.style.top=y;却无法正常实现。
div出现之后依旧是在页面的左上角。
求解。
PS:
x和y是之前计算出的。
var sign=document.getElementById('jidian');
var x=sign.offsetLeft;
var y=sign.offsetTop;
sign=sign.offsetParent;
while(sign!==null){
x+=sign.offsetLeft;
y+=sign.offsetTop;
sign=sign.offsetParent;
}
ele.style.left=x;(x是之前计算出的)
ele.style.top=y;
ele.style.display="block";
用js修改div的显示和位置,
但是他的显示是可以设置成功,
也就是说
ele.style.display="block";成功执行了,
但是ele.style.left=x;和ele.style.top=y;却无法正常实现。
div出现之后依旧是在页面的左上角。
求解。
PS:
x和y是之前计算出的。
var sign=document.getElementById('jidian');
var x=sign.offsetLeft;
var y=sign.offsetTop;
sign=sign.offsetParent;
while(sign!==null){
x+=sign.offsetLeft;
y+=sign.offsetTop;
sign=sign.offsetParent;
}
请贴html代码与css部分代码.
y+"px"
offsetHeight,offsetWidth取出来parseInt一下再用
<fieldset style="margin-top:13px; width:400px">
<form>
<table border="0" width="400">
<tr>
<td width="86" class="right" valign="top"><dfn>*</dfn> 用户名:</td>
<td colspan="2">
<div class="oneline">
<input type="text" id="un" class="inputbox" maxlength="100" />
</div></td>
</tr>
<tr>
<td width="86" class="right" valign="top"><dfn>*</dfn> 密码:</td>
<td colspan="2">
<div class="oneline">
<input type="password" id="p1" class="inputbox" maxlength="100" />
</div>
</td>
</tr>
<tr>
<td >
</td>
<td width="79" valign="top" class="right">
<button tabindex="3" type="submit" style="width:119px; height:35px; background:url(img/btn4.jpg); border:none;"></button></td>
<td width="221" style="padding-left:10px;"><a href="#">忘记密码?</a></td>
</tr>
</table>
</form>
</fieldset>
</div>
这是登陆框的代码,是别人做的,我只是将这段代码加到我的页面下端,在</body>之前
另外,
css代码是,其中first的position设置的就是absolute;
*{ margin:0; padding:0;}
#first{position: absolute;}
#first div.right{ width:283px; float:left}
#first div.oneline{width:auto; height:50px; }
#first div.twoline{width:auto; height:50px; color:#666; font-size:12px;}
.inputbox{width:250px; height:18px; float:left; line-height:18px; color:#333; border:1px solid #cacaca; background:#fff; padding:3px; margin-right:5px; display:inline;}
dfn{color:#f00; padding-right:5px; font-style:normal;}
求解释
都是几百的大数,数目根据页面的高度变化的。
xy的值类型是number
div的position设置的就是absolute;
只是因为js在给style.left赋值的时候,不能直接赋 计算出来的xy,
但是要是把x和y +"px";js会自动将其转换为字符串,
赋值的时候就不会出错了。