您的位置：首页 > 移动开发 > Objective-C

关于div覆盖select标签的问题

2011-11-22 19:57 531 查看

<!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;

   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>

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

标签： div object button function bt 文档

相关文章推荐

新的分享

章节导航