克隆DIV＆修改ID

我需要克隆風格DIV（id="#mirrorBG1"）和修訂新div id來id="#mirrorBG2"然後應用類#mirrorBG2在CSS控制新div位置&大小等克隆DIV＆修改ID

不限想法，請！

<div id="mirrorBG1">IMAGE#1 (*main image*) </div> 

resulting in adding: <div id="mirrorBG2">IMAGE#1 (*same image*) </div> 

#mirrorBG1 { width:50%; height:300px; background-color:#0F0"; float:left; clear:both; } 
#mirrorBG2 { width:50%; height:300px; background-color:#FF0"; float:right; clear:both; }

來源

2013-07-22 Mike Lowrider

aye，tiz true;） –

打開使用jQuery？ – Learner

是的jQuery是我看到的是prob我最好的選擇。我只是不是一個硬核編碼器：/ –

如果不是你太多的依賴的，可以考慮使用jQuery及其clone()和append()方法。欲瞭解更多信息，請參閱the jQuery API。

來源

2013-07-22 14:41:58 Rune

是啊，讀了一些，我不是太瞭解JS，更多的是前端設計師。謝謝！ –

更新版本：

var div2 = document.getElementById("mirrorBG1").cloneNode(true); 
div2.setAttribute("id","mirrorBG2"); 
div2.className = "mirrorBG2";

之後，你追加的DIV，無論你想它。例如：

document.body.insertBefore(div2, null);

看到jsfiddle

編輯：

如stavarotti指出，班級列表並未完全由IE版本支持先前至10

所以不是：

div2.classList.remove("mirrorBG1"); 
div2.classList.add("mirrorBG2");

你可以這樣做取而代之：

div2.className = "mirrorBG2";

這將用「mirrorBG2」替換類「mirrorBG1」。

我更新了jsfiddle以顯示這些更改。

來源

2013-07-22 14:42:48

嗨，謝謝，我可以有一個完整的工作代碼示例嗎？我對JS不太瞭解。我更像是一名前端設計師。謝謝 –

請參閱jsfiddle的更新 –

請注意，除非您使用墊片，否則僅在IE10 +中支持classList。 – stavarotti

克隆DIV＆修改ID

回答

相關問題