克隆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

回答

相关问题