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

最新推荐文章于 2023-08-15 00:42:53 发布

kk371558956

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量5.9k

点赞数

文章标签： html object bt div 文档 javascript

本文链接：https://blog.youkuaiyun.com/kk371558956/article/details/7001714

版权

<!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" οnclick="showDiv()"/>
<input type="button" name="bt2" value="关闭DIV" οnclick="closeDiv()"/>
<input type="button" name="bt3" value="启动iframe-->显示DIV" οnclick="showIframe()"/>
<input type="button" name="bt4" value="关闭iframe-->显示DIV" οnclick="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;
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>