js div添加关闭按钮
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/l...
<!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);
}
}
} 展开
<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);
}
}
} 展开
2个回答
展开全部
具体代码那如下：
<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>。
<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>。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
odiv.item(i).onmousedown=function(){
this.removeChild(oclose);
这里的i 是循环退出之后的值。
你可以在前面oclose.onmousedown 来添加删除function
this.removeChild(oclose);
这里的i 是循环退出之后的值。
你可以在前面oclose.onmousedown 来添加删除function
追问
您好，我写错了，应该是down 改成onmouseout
我的另外主要问题应该是似乎叫冒泡事件
div 里有一个 span 当鼠标放到span上的话 也会发生 over out 事件
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
