Question

我是JavaScript的新手，我找到了一个可以让我使用javascript下载confettis的codepen。 javascript代码适用于整个机构，因此confettis遍布整个文档。相反，我希望confettis效果仅适用于我的div（confettis-section）。我仍然是该语言的初学者，因此不确定如何将其修改为我想要的方式。非常感谢任何帮助。

<div class="confettis-section">
</div>

https://codepen.io/Pillowfication/pen/PNEJbY

Answer 1

我更改了HTML和JS

<div class="row">
  <div class="col m6"style="width:50%; height: 30vh; border: 1px solid black">
    <h4>Hi</h4>
    <h4>Hi</h4>
    <h4>Hi</h4>
</div>
  <div class="col m6" id="area">
    <h4>Hi</h4>
    <h4>Hi</h4>
    <h4>Hi</h4>
  </div>
</div>

我将第115行改为：

var container = document.getElementById('area');
  container.style.position = 'fixed';
  container.style.top      = '0';
  container.style.left     = '50vw'; //<-- start from half the screen width
  container.style.width    = '50%';//<-- width of container itself is 50% of screen
  container.style.height   = '30vh';//<--height of area is 30/100 of screen height
  container.style.overflow = 'visible';
  container.style.zIndex   = '9999';
  container.style.border = '1px solid black';//<--setting border here

我删除了col类的边框css，并将它添加到HTML和JS中，用于两个不同的列

Answer 2

以下是您更新的代码链接：like here

body {
  background-color: #111;
}

#area {
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area"></div>

{{1}}

将Javascript从应用于整个文档设置为仅div

2 个答案: