从javascript动态生成的DIV位置问题 [英] DIV position problem generated dynamically from javascript
本文介绍了从javascript动态生成的DIV位置问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发现了两个问题
1）我的代码只适用于IE浏览器。
2）div里面的文本没有垂直定位。
这里是我的代码。
< html xmlns =http://www.w3.org/1999/xhtml>
< head id =Head1runat =server>
< title>无标题页< /标题>
< script type =text / javascriptlanguage =javascript>
var modalWindow = null;
function drawDiv（）{
var txt = document.getElementById（'TextBox1'）;
var dime = new Dimension（txt）;
modalWindow = document.createElement（'div'）;
modalWindow.style.position ='绝对';
modalWindow.setAttribute（align，center）;
modalWindow.setAttribute（vertical-align，middle）;
modalWindow.innerHTML ='< p> hello ...< / p>';
modalWindow.style.left = dime.x;
modalWindow.style.top = dime.y;
modalWindow.style.width = dime.w;
modalWindow.style.height = dime.h;
modalWindow.style.backgroundColor ='＃C0C0C0';
document.body.appendChild（modalWindow）;
返回false;
}
function hider（whichDiv）{
document.getElementById（modalWindow）.style.display ='none';
}
函数Dimension（element）{
this.x = -1;
this.y = -1;
this.w = 0;
this.h = 0;
if（element == document）{
this.x = element.body.scrollLeft;
this.y = element.body.scrollTop;
this.w = element.body.clientWidth;
this.h = element.body.clientHeight;
}
else if（element！= null）{
var e = element;
var left = e.offsetLeft; （（e = e.offsetParent）！= null）{
left + = e.offsetLeft;
while（（e = e.offsetParent）！= null）
}
var e = element;
var top = e.offsetTop; （（e = e.offsetParent）！= null）{
top + = e.offsetTop;
}
this.x = left;
this.y = top;
this.w = element.offsetWidth;
this.h = element.offsetHeight;
}
}
< / script>
< / head>
< body>
< div>
< form id =form1runat =server>
< asp：TextBox ID =TextBox1runat =serverHeight =180pxStyle =left：307px; position：relative;
top：264pxTextMode = MultiLineWidth =432px>< / asp：TextBox>
< asp：Button ID =Button1runat =server
Text =ButtonOnClientClick =return drawDiv（）/>
< / form>
< / div>
< / body>
< / html>
基本上，我试图在多行文本框中放置一个div，以防止用户访问多行文本框。我的代码在IE中工作正常，但在Firefox中无法正常工作。当我在Firefox中运行代码时，div在文本框中没有正确获取位置。我认为我的JavaScript不是交叉浏览器。所以请纠正我的javascript，使其crossbrowser。
谢谢
解决方案
JavaScript
function disable（id）{
var txt = document.getElementById ID）;
txt.disabled = true;
返回false;
}
ASP
< asp：Button ID =Button1runat =serverText =Button
OnClientClick =return disable（'TextBox1'） />
注意：您也可以隐藏文本框。
here i generate a div from javascript and position over the text box.
i found two problem 1) my code is working only for IE. 2) text inside in div is not getting positioned vertically center.
here is my code.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
var modalWindow = null;
function drawDiv() {
var txt = document.getElementById('TextBox1');
var dime = new Dimension(txt);
modalWindow = document.createElement('div');
modalWindow.style.position = 'absolute';
modalWindow.setAttribute("align", "center");
modalWindow.setAttribute("vertical-align", "middle");
modalWindow.innerHTML = '<p>hello...</p>';
modalWindow.style.left = dime.x;
modalWindow.style.top = dime.y;
modalWindow.style.width = dime.w;
modalWindow.style.height = dime.h;
modalWindow.style.backgroundColor = '#C0C0C0';
document.body.appendChild(modalWindow);
return false;
}
function hider(whichDiv) {
document.getElementById(modalWindow).style.display = 'none';
}
function Dimension(element) {
this.x = -1;
this.y = -1;
this.w = 0;
this.h = 0;
if (element == document) {
this.x = element.body.scrollLeft;
this.y = element.body.scrollTop;
this.w = element.body.clientWidth;
this.h = element.body.clientHeight;
}
else if (element != null) {
var e = element;
var left = e.offsetLeft;
while ((e = e.offsetParent) != null) {
left += e.offsetLeft;
}
var e = element;
var top = e.offsetTop;
while ((e = e.offsetParent) != null) {
top += e.offsetTop;
}
this.x = left;
this.y = top;
this.w = element.offsetWidth;
this.h = element.offsetHeight;
}
}
</script>
</head>
<body>
<div>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Height="180px" Style="left: 307px; position: relative;
top: 264px" TextMode="MultiLine" Width="432px"></asp:TextBox>
<asp:Button ID="Button1" runat="server"
Text="Button" OnClientClick=" return drawDiv()" />
</form>
</div>
</body>
</html>
basically i was trying to place a div just on the multiline text box to prevent user to access that multiline text box. my code is working fine in IE but not working properly in firefox. when i run the code in firefox then div is not getting position properly on the textbox. i think my javascript is not crossbrowser. so please rectify my javascript to make it crossbrowser.
thanks
解决方案
Javascript
function disable(id) {
var txt = document.getElementById(id);
txt.disabled = true;
return false;
}
ASP
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="return disable('TextBox1')" />
Note: you can also hide the textbox if you want.
这篇关于从javascript动态生成的DIV位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
