容器不想用 js 函数模糊

Question

我正在建立一个网站，我想在单击按钮时模糊一个容器。

我尝试在我的容器上添加一个 "blur" class 和一个 js 函数

var vid = document.getElementById("bgvid");
vid.volume = 0.01;
var x = document.getElementById("formregister");
var container = document.getElementById('container');

function hideShow() {
  if (x.style.display === "none") {
    x.style.display = "block";
    container.setAttribute('class', 'blur');
  } else {
    x.style.display = "none";
    container.setAttribute('class', null);
  }
}

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
}

.bg,
.bg-filter {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

.bg-filter {
  z-index: -99;
  opacity: 0.2;
  background: -webkit-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: -moz-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: -o-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
}

.top_vid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top_vid .title {
  font-family: 'Montserrat', sans-serif;
  margin-left: 3%;
  font-size: 3.2em;
  color: #fff;
}

.start {
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  margin-right: 3%;
}

.start span {
  cursor: pointer;
  position: relative;
  transition: 0.5s;
}

.start span:after {
  color: #31E0F7;
  content: '[=11=]bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.start:hover span {
  padding-right: 25px;
}

.start:hover span:after {
  opacity: 1;
  right: 0;
}

.registerform {
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px);
}

<div id="container">

  <video autoplay loop poster muted class="bg" id="bgvid">
    <source src="http://cdn-b-east.streamable.com/video/mp4/xoecp.mp4?token=TvBJWgOGquHb07Q5IlkCZA&expires=1558304940" type="video/mp4"></source>
  </video>

  <div class="bg-filter" id="bg-filter"></div>

  <div class="top_vid">
    <h1 class="title">Moodyness</h1>
    <button class="start" onclick="hideShow()"><span>Let's move !</span></button>
  </div>

</div>

<div class="registerform" id="formregister" style="display: none;">

  <form action="#" method="post">
    <input type="email" placeholder="EMAIL" required></input>
    <input type="password" placeholder="PASSWORD" required></input>
    <input type="password" placeholder="REPEAT PASSWORD" required></input>

    <div class="check">
      <label for="checkbox">Acceptez vous les conditions d'utilisation ?</label>
      <input type="checkbox" id="checkbox" required></input>
    </div>

    <input type="submit" value="Okay !"></input>
  </form>

</div>

我希望除了新表格之外的所有内容都被模糊化并显示出来，但它似乎不起作用，在 codepen 中它不模糊，而在我的电脑中它使整个 body移至页面顶部。

谢谢！

Answer 1

您可以使用 classList.add() 和 classList.remove() 方法添加或删除 class。

classList Reference

还有一个细节，在您的 css 中您忘记添加一个“.”在模糊之前，所以你的选择器是用于标签模糊而不是 class 模糊，所以你应该更改为以下内容：

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(10px); 
}

添加模糊class

vid.classList.add('blur');

去除模糊class

vid.classList.remove('blur');

Answer 2

好的，我在 CSS 中找到它将 blur 更改为 .blur 并写入 z-index :-100 和运行

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
  z-index:-100
}

Answer 3

这是你想要的吗？ https://jsfiddle.net/Lrfyowc3/

我先在css的"blur"前加了句号。其次，我将 id="top_vid" 添加到顶部文本的 html 中。第三，我为 "top_vid" 添加了一个变量，并将以下内容添加到 javascript:

      vid.className += " blur";
   top_vid.className += " blur";

容器不想用 js 函数模糊

Container don't wanna blur with js function

html

javascript

css

blur

button