在我的HTML中,我有4個框,我想要增加大小並通過onclick顯示在網站中間。但它不適用於這個克隆版本。通過onclick克隆div和更改樣式
function changeSize(id, weight, height){
\t //$("." + id).clone().appendTo("new" + id);
\t var elem = document.getElementById(id);
clone = elem.cloneNode(true); // true means clone all childNodes and all event handlers
\t clone.id = "newid" +id;
\t document.body.appendChild(clone);
\t
if(elem.getAttribute('style')){
elem.removeAttribute('style');
} else {
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.fontSize = '30px';
elem.style.position = 'absolute';
elem.style.left= '40%';
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
\t width:240px;
\t height:300px;
\t background-color:darkgrey;
\t background-position:center;
\t background-repeat:no-repeat;
\t text-shadow:0px 0px 3px #000;
\t border: 5px solid #F0F8ff;
\t vertical-align:top;
\t text-shadow: 3px 3px 4px #777;
\t float:left;
\t margin-left:30px;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
問:我怎樣才能通過的onclick克隆盒,並顯示在網站的中間?如何通過onclick刪除它?
克隆:您必須複製對象的狀態,這可以通過枚舉和複製其屬性或通過從「排序藍圖」中創建對象來完成。要將它移動到網站的中間,請修改其CSS屬性,即TOP和LEFT,並通過onclick將其刪除,只需添加一個事件偵聽器並將其從DOM中的父級刪除即可 –
您需要使用純JavaScript或jQuery可以用嗎? –
@nolags:你在找這樣的東西 - https://jsfiddle.net/abhitalks/0tx5do9w/? – Abhitalks