使用DOM模型实现图片在div之间切换

最新推荐文章于 2022-01-10 12:23:41 发布

石大菜鸟

最新推荐文章于 2022-01-10 12:23:41 发布

阅读量565

点赞数

文章标签： DOM解析 div切换

本文链接：https://blog.csdn.net/u010675319/article/details/38322293

版权

  <head>
	<style type="text/css">
		div {height: 120px; border: 1px solid black; background-color: #EEE; padding: 2px;}
		img {width: 100px; height: 100px; margin: 2px; border: 1px solid gray; cursor: pointer;}
	</style>
  </head>
  <script type="text/javascript">
  	function init()
  	{
  		//将10张图片放入到未选中栏目
  		var unSel = document.getElementById("unSelected");
  		for(var i = 1; i < 11; i++)
  		{
  			var img = document.createElement("IMG");
  			img.setAttribute("src", "images/"+i+".jpg");
  			//为图片添加点击事件
  			img.setAttribute("onclick", "img_onclick(this)");
  			unSel.appendChild(img);	
  		}
  	}
  	//图片事件处理方法
  	function img_onclick(img)
  	{
  		var unSel = document.getElementById("unSelected");
  		var sel = document.getElementById("selected");
  		//判断当前被点击图片的父节点是哪一个
  		if(img.parentNode == unSel)
  		{
  			//如果父节点是"未选中商品栏"，则将图片移至"选中商品栏"
  			sel.appendChild(img);
  		} 
  		else 
  		{
  			unSel.appendChild(img);
  		}
  	}
  </script>
  <body οnlοad="init()">
  	<h3>未选中商品</h3>
    <div id="unSelected"></div>
   	<h3>已选中商品</h3>
    <div id="selected"></div>
  </body>

未选中前