Question

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

http

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

问题：如何通过onclick克隆该框并将其显示在网站中间？如何通过onclick删除它？

Answer 1

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

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

CSS（＆＃34; PROPERTYNAME＆＃34;＆＃34;值＆＃34）;

＆＃13;

$(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"

    });

  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你只需要将div放在中间并点击它就应该回到原来的位置。试试这段代码，不需要jquery。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

更新代码：希望这是您所寻找的：）

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

通过onclick克隆div和改变样式

3 个答案: