通过onclick克隆div和更改样式

Question

在我的HTML中，我有4个框，我想要增加大小并通过onclick显示在网站中间。但它不适用于这个克隆版本。

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删除它？

Answer 1

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

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

CSS（ “PROPERTYNAME”， “价值” ）;

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

如果你只是需要把股利在中上单击它应该回到原来的位置。尝试这个代码，不需要jQuery的。

function changeSize(id, weight, height){ 
 
\t var elem = document.getElementById(id); \t 
 
\t if(elem.className == 'absoluteclass'){ 
 
\t elem.setAttribute('class','kaesten'); 
 
\t }else{ \t   
 
\t var currentAbsoluteElem = document.getElementsByClassName('absoluteclass'); 
 
\t if(currentAbsoluteElem.length > 0){ 
 
\t \t console.log(currentAbsoluteElem[0]) 
 
\t \t currentAbsoluteElem[0].setAttribute('class','kaesten'); 
 
\t } 
 
\t var elem = document.getElementById(id); 
 
\t elem.setAttribute('class','absoluteclass'); 
 
\t /* 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%'; 
 
\t */ 
 
\t } 
 
} 
 

 
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; 
 
} 
 
.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>

没有需要克隆的股利，如果你仍然需要克隆的股利，我们可能需要更改代码accordingly.You可以检查的jsfiddle here

Answer 3

更新的代码：希望这是你要找的:)

function changeSize(id, weight, height){ 
 
    var elem = document.getElementById(id); 
 
\t var currentAbsoluteElem = document.getElementById('dummy'); 
 
    var text = elem.innerHTML; 
 
    currentAbsoluteElem.innerHTML = text; 
 
\t currentAbsoluteElem.style="display:block"; 
 
    /*Extra styling neeed to be done here*/ 
 
     
 
\t } 
 

 
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{ 
 
\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; 
 
} 
 
.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>