通过onclick克隆div并更改样式

Question

在我的HTML中，我有4个框，我希望增大框的大小，并通过onclick出现在网站的中间。 但它不适用于此克隆版本。

 function changeSize(id, weight, height){ //$( "." + id ).clone().appendTo( "new" + id ); var elem = document.getElementById(id); clone = elem.cloneNode(true); // true means clone all childNodes and all event handlers clone.id = "newid" +id; document.body.appendChild(clone); 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{ width:240px; height:300px; background-color:darkgrey; background-position:center; background-repeat:no-repeat; text-shadow:0px 0px 3px #000; border: 5px solid #F0F8ff; vertical-align:top; text-shadow: 3px 3px 4px #777; float:left; 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删除它？

Answer 1

您可以使用jQuery css（）方法修改CSS：来源： http : //api.jquery.com/css/

要设置指定的CSS属性，请使用以下语法：

css（“ propertyname”，“ value”）;

 $(document).ready(function() { $('.kaesten').click(function() { $('.kaesten').removeAttr('style'); var id = $(this).attr('id'); $('#' + id).css({ "width": "30em", "height": "18em", "top": "50%", "left": "50%", "position": "fixed", "margin-top": "-9em", "margin-left": "-15em", "background-color": "blue" }); }); }); 

 .kaesten { cursor: pointer; width: 240px; height: 300px; background-color: darkgrey; background-position: center; background-repeat: no-repeat; text-shadow: 0px 0px 3px #000; border: 5px solid #F0F8ff; vertical-align: top; text-shadow: 3px 3px 4px #777; float: left; margin-left: 30px; color: #fff; font-family: 'helvetica'; } .container { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"> <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> </div> 

Answer 2

如果您只需要将div置于中间，然后单击它应返回到原始位置。尝试使用此代码，无需使用jquery。

 function changeSize(id, weight, height){ var elem = document.getElementById(id); if(elem.className == 'absoluteclass'){ elem.setAttribute('class','kaesten'); }else{ var currentAbsoluteElem = document.getElementsByClassName('absoluteclass'); if(currentAbsoluteElem.length > 0){ console.log(currentAbsoluteElem[0]) currentAbsoluteElem[0].setAttribute('class','kaesten'); } var elem = document.getElementById(id); elem.setAttribute('class','absoluteclass'); /* for making the height , width dynamic you can change it from here elem.style.width = weight + 'px'; elem.style.height = height + 'px'; 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{ width:240px; height:300px; background-color:darkgrey; background-position:center; background-repeat:no-repeat; text-shadow:0px 0px 3px #000; border: 5px solid #F0F8ff; vertical-align:top; text-shadow: 3px 3px 4px #777; float:left; margin-left:30px; } .absoluteclass{ position:absolute; background-color:darkgrey; width:600px; height:600px; left:calc(50% - 300px); } 

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

无需克隆div，如果仍然需要克隆div，我们可能需要相应地更改代码。您可以在此处检查JSFIDDLE

Answer 3

更新的代码：希望这就是您想要的:)

 function changeSize(id, weight, height){ var elem = document.getElementById(id); var currentAbsoluteElem = document.getElementById('dummy'); var text = elem.innerHTML; currentAbsoluteElem.innerHTML = text; currentAbsoluteElem.style="display:block"; /*Extra styling neeed to be done here*/ } var elems = document.getElementsByClassName('kaesten'); for(var i = 0; i < elems.length; i++){ elems[i].onclick = function(){ changeSize(this.id, 600, 600); } } var absoluteCl = document.getElementsByClassName('absoluteclass'); absoluteCl[0].onclick = function(){ console.log(document.getElementsByClassName('absoluteclass')) document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none'); } 

 .kaesten{ width:240px; height:300px; background-color:darkgrey; background-position:center; background-repeat:no-repeat; text-shadow:0px 0px 3px #000; border: 5px solid #F0F8ff; vertical-align:top; text-shadow: 3px 3px 4px #777; float:left; margin-left:30px; } .absoluteclass{ position:absolute; background-color:darkgrey; width:600px; height:600px; left:calc(50% - 300px); display:none; } 

 <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> <div id="dummy" class="absoluteclass"></div>