js div添加关闭按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js div添加关闭按钮相关的知识，希望对你有一定的参考价值。
<!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>无标题文档</title>
</head>
<style type="text/css">
div width:200px; height:50px; border:1px solid #f00; position:relative; margin:2px;
.close width:10px; height:10px; background:#666; position:absolute; top:5px; right:5px;
</style>
<script type="text/javascript">
window.onload=function()
var odiv=document.getElementsByTagName("div");
for(var i=0;i<odiv.length;i++)
odiv.item(i).onmouseover=function()
var oclose=document.createElement("span");
oclose.className="close";
oclose.innerHTML="x";
this.appendChild(oclose);
odiv.item(i).onmousedown=function()
this.removeChild(oclose);
</script>
<body>
<div >1</div>
<div >2</div>
<div >3</div>
</body>
</html>
上述代码问题 1.自动添加过多span 2. 不能自动移除 求解。
window.onload=function()
var odiv=document.getElementsByTagName("div");
for(var i=0;i<odiv.length;i++)
odiv.item(i).onmouseover=function()
var oclose=document.createElement("span");
oclose.id="closeid";
oclose.className="close";
oclose.innerHTML="x";
this.appendChild(oclose);
odiv.item(i).onmousedown=function()
var oclose=document.getElementById("closeid");
this.removeChild(oclose);
<script type="text/javascript">
function removeElement(id)
document.getElementById(id).style.display="none";
</script> 上面是js部分，下面这段是html的，我尽量简化一些<div id="bar1"> <img>
<p onclick="removeElement('bar1')">关闭</p></div>
<div id="bar2">
<img>
<p onclick="removeElement('bar2')">关闭</p>
</div>
nclick 属性由元素上的鼠标点击触发。
注释：onclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。 参考技术B odiv.item(i).onmousedown=function()
this.removeChild(oclose);
这里的i 是循环退出之后的值。
你可以在前面oclose.onmousedown 来添加删除function追问
您好，我写错了，应该是down 改成onmouseout
我的另外主要问题应该是似乎叫冒泡事件
div 里有一个 span 当鼠标放到span上的话 也会发生 over out 事件
以上是关于js div添加关闭按钮的主要内容，如果未能解决你的问题，请参考以下文章
求一段js代码打开页面div5秒弹出，点击关闭按钮后再次定时弹出