Question

我有一个工作的javascript克隆div而不是移动其他div在同一行。但是当我尝试在html中实现它时，无法关闭最大化的div。

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="java_test.js"></script>
<link href="max_css.css" rel="stylesheet" />
</head>


<body>



<div id="box1" class="kaesten" onclick="changeSize('box1', 600, 600)">test1</div>
<div id="box2" class="kaesten" onclick="changeSize('box2', 600, 600)">test2</div>
<div id="box3" class="kaesten" onclick="changeSize('box3', 600, 600)">test3</div>
<div id="box4" class="kaesten" onclick="changeSize('box4', 600, 600)">test4</div>
<div id="dummy" class="absoluteclass" onclick="changeSize('dummy', 600, 600)" ></div>


</body>

function changeSize(id, weight, height){
     var elem = document.getElementById(id);
	   var currentAbsoluteElem = document.getElementById('dummy');
     var text = elem.innerHTML;
     currentAbsoluteElem.innerHTML = text;
	   currentAbsoluteElem.setAttribute('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(30%);
   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>

问题：如何通过onclick将JavaScript函数实现到我的HTML中以使大div接近？

Answer 1

您可以像这样修改changeSize功能。

function changeSize(id, weight, height){
   var currentAbsoluteElem = document.getElementById('dummy');
   if(id == null && weight == null && height == null){
     currentAbsoluteElem.setAttribute('style','display:none');
   }else{
     var elem = document.getElementById(id);
     var text = elem.innerHTML;
     currentAbsoluteElem.innerHTML = text;
     currentAbsoluteElem.setAttribute('style','display:block');
     /*Extra styling neeed  to be done here*/
   }
}

并在你的HTML中

<div id="dummy" class="absoluteclass" onclick="changeSize()" ></div>

我希望这就是你想要的。

clone div实现不起作用

1 个答案: