您的位置：首页 > 理论基础 > 计算机网络

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

2011-11-22 19:56 597 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>关于div覆盖select标签的问题</title>
</head>
<body>
<input type="text" name="userName" value="" style="width:250px" />
<br/>
<br/>
<select id="state" name="state" style="width:255px">
<option value="0">苹''''''''''''''''''''''''''果</option>
<option value="1">香''''''''''''''''''''''''''蕉</option>
<option value="2">西''''''''''''''''''''''''''瓜</option>
</select>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" name="bt1" value="显示DIV" onclick="showDiv()"/>
<input type="button" name="bt2" value="关闭DIV" onclick="closeDiv()"/>
<input type="button" name="bt3" value="启动iframe-->显示DIV" onclick="showIframe()"/>
<input type="button" name="bt4" value="关闭iframe-->显示DIV" onclick="closeIframe()"/>
</body>
<iframe   id="DivShim"  src="javascript:false;"  scrolling="no"  frameborder="0"  style="position:absolute; top:0px; left:0px; display:none;"></iframe>
<script type="text/javascript">

var div;
var iframe;
function init()
{
    div = window.document.createElement("DIV");
    //z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
    div.style.zIndex=100;
    div.id="partName";
    div.style.display="none";
    window.document.body.insertAdjacentElement("beforeEnd",div);
}
init();
function showDiv()
{
    div.style.position ="absolute";
    div.style.backgroundColor="infobackground";
    div.style.overflowY="auto";
    div.style.overflowX="hidden";
    div.style.pixelTop=0;
    div.style.pixelLeft=0;
    div.style.pixelWidth=300;
    div.style.pixelHeight=200;
    div.style.display="block";
}
function closeDiv()
{
    div.style.display="none";
}
function showIframe()
{
    iframe=document.getElementById("DivShim");
    iframe.style.backgroundColor="red";
    iframe.style.top=0;

a473
    iframe.style.left=0;
    iframe.style.display="block";
    iframe.style.width=300;
    iframe.style.height=200;
}
function closeIframe()
{
    iframe.style.width=0;
    iframe.style.width=0;
}
/**语法：
oElement = object . insertAdjacentElement ( sWhere , oElement )
参数：
oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。
sWhere :　必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin :　将 oElement 插到 object 的开始标签之前。
afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。
beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。
afterEnd :　将 oElement 插到 object 的结束标签之后。

返回值：
oElement :　对象(Element)。返回插入的对象的引用。
说明：
将 oElement 依据 object 定位插入文档结构。
当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。
假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。
*/
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html object bt div 文档 javascript

相关文章推荐

新的分享

章节导航