Question

我想在特定高度后的div中重复特定的div元素。

考虑我们有一个<span>，我们想在div.的每50像素高度后添加一个<html> <head> <script> function test() { var length = document.getElementById('lc').style.length; var element = document.createElement("div"); element.setAttribute("id", "break"); element.style.border element.appendChild(document.createTextNode('Hello how are you')); document.getElementById('lc').appendChild(element); } </script> </head> <body> <input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" /> <div id="lc" style="background: blue; height: 150px; width: 150px; }" onclick="test();"> </div> </body> </html>标签。

我们如何实现这一目标？

我已经尝试过此代码。

Count

问题是我可以在此基础上重复循环执行此代码

Answer 1

尝试此代码

<script>

function test() {
var length = document.getElementById('lc').style.length;


    var element = document.createElement("div");
    element.setAttribute("id", "break");
    element.appendChild(document.createTextNode('Hello how are you'));
    element.style.height = "50px";
    element.style.display = "block";
    document.getElementById('lc').appendChild(element);
}

</script>

</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />

<div id="lc" style="background: #999;min-height:150px;width: 150px;" onclick="test();">  
</div>
</body>

</html>

Answer 2

类似的东西吗？

在这里，我为区域中的每50px添加一个div（在代码中阅读我的评论）。

重要提示：您可以完全忽略eventListener。这部分只是为了使脚本在调整窗口大小之后重新计算所需的跨度。

// Adding event listener
window.addEventListener("resize", magic);
// Running the function once so you don't have to resize the window
magic();
function magic() {
  // Clear the last elements
  while(area.firstChild) area.removeChild(area.firstChild);
  // Get the needed amout of spans needed
  let count = Math.floor(area.clientHeight / 50);
  // Adding a span for each 50px
  for(let i = 0; i < count; i++) {
  	let span = document.createElement("span");
    	span.className = "spans";
      span.innerText = "Span WOHOO :D";
    area.appendChild(span);
  }
}

*{margin:0;padding:0;}
body, html {
  height: 100%;
  width: 100%;
}

#area {
  background-color: gray;
  height: 100%;
  width: 100%;
}

.spans {
  display: block;
  height: 50px;
  border-bottom: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
 <div id="area">
 </div>
</body>
</html>

Elias :)祝您有美好的一天

在特定高度后在div中动态重复html标签

2 个答案: