克隆：
?? ??? ??? ??? ??? ??? ?obj.cloneNode();//是否深度克隆;true:深度克隆,
?? ??? ??? ??? ??? ??? ?刪除一個屬性:obj.removeAttribute('屬性名');
?? ??? ??? ??? ??? ??? ??? ?window.οnlοad=function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?var oBox=document.getElementById("box");
?? ??? ??? ??? ??? ??? ??? ??? ??? ?var oBtn=document.getElementById("btn");
?? ??? ??? ??? ??? ??? ??? ??? ??? ?oBtn.οnclick=function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var oNewDiv=oBox.cloneNode(true);//true為深度克隆(根據oBox克隆)，括號里默認為false
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.removeAttribute('id');//移出id屬性
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?document.body.appendChild(oNewDiv);
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?}

?

帶框拖拽:
?? ??? ??? ??? ??? ??? ??? ?window.οnlοad=function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var oBox=document.getElementById("box");
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.οnmοusedοwn=function(ev){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var e=ev||event;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var disX=e.clientX-oBox.offsetLeft;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var disY=e.clientY-oBox.offsetTop;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var oNewDiv=oBox.cloneNode(true); //深度克隆出類似oBox的div
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.removeAttribute('id');//刪除新div的id屬性
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.className='newDiv';
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.width=oBox.offsetWidth+'px';//新div的大小等于oBox的大小
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.height=oBox.offsetHeight+'px';
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.left=oBox.offsetLeft+'px';//新div的初始位置在oBox的位置
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.top=oBox.offsetTop+'px';
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.parentNode.appendChild(oNewDiv);//新div添加到oBox的父級
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?document.οnmοusemοve=function(ev){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var e=ev||event;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var l=e.clientX-disX; //獲取新位置
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var t=e.clientY-disY;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.left=l+'px';? //新div跟著鼠標走
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oNewDiv.style.top=t+'px';
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? document.οnmοuseup=function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?document.οnmοusemοve=null;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?document.οnmοuseup=null;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.style.left=oNewDiv.offsetLeft+'px';? //鼠標抬起后oBox來到新div的位置,同時新div消失
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.style.top=oNewDiv.offsetTop+'px';
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.parentNode.removeChild(oNewDiv);
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?oBox.releaseCapture&&oBox.releaseCapture();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?????????? oBox.setCapture&&oBox.setCapture();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? ? ? ?? return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? }
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??????? document.οncοntextmenu=function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ????????? return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??????? } //阻止右鍵菜單
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?}

轉載于:https://www.cnblogs.com/yang0902/p/5698679.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的克隆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。