在 JavaScript 按钮上应用某些 .class 并避免文本未对齐

Question

这是带有代码的 JSFiddle。

目标：单击按钮应仅.blur_filter_off将类应用于. 整个文本应保持原样，即1行。当前问题： 1）单击按钮会停用属性而不是应用类。2)单击按钮时文本分为2行。附加信息：一般情况下不确定，因为想法如下：最初通过类模糊，并在通过类单击按钮时变得不模糊。也许有一种方法可以在不实现财产的情况下做到这一点。span id="hint"

display:none.blur_filter_off

display:nonespan id="hint"blur_filter_onblur_filter_offdisplay:none

function showHint(id1) {

  var x = document.getElementById(id1).style;

  x.display = (x.display != "block") ? "block" : "none";

}

.example {

  color: #1f2c60;

  font-size: calc(0.7em + 2.3vw);

}

.blur_filter_on {

  filter: blur(0.35em);

}

.blur_filter_off {

  animation-name: blur_decrease;

  animation-timing-function: ease;

  animation-duration: 1s;

}

@keyframes blur_decrease {

  from {

    filter: blur(0.35em);

  }

  to {

    filter: blur(0);

  }

}

<div>

  <span class="example"><span class="blur_filter_on"><span id="hint">This is</span> the sentence i use as an</span> example.</span>

</div>

<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>

Answer 1

这是可以实现您指定的目标的解决方案。我在这里使用普通的 javascript，你也可以使用 jQuery 来实现这一点。它还需要调整 HTML 和 CSS。更新后的工作小提琴在这里function showHint(id1) {&nbsp; var x = document.getElementById(id1);&nbsp; var blurOffClass = "blur_filter_off";&nbsp;&nbsp;&nbsp; if (!x.classList.contains(blurOffClass)) {&nbsp; &nbsp; &nbsp;x.classList.add(blurOffClass);&nbsp; }}.example {&nbsp; color: #1f2c60;&nbsp; font-size: calc(0.7em + 2.3vw);}.blur_filter_on > * {&nbsp; filter: blur(0.35em);}.blur_filter_off {&nbsp; animation-name: blur_decrease;&nbsp; animation-timing-function: ease;&nbsp; animation-duration: 1s;&nbsp; filter: blur(0);}@keyframes blur_decrease {from { filter: blur(0.35em); }to { filter: blur(0); }}<div>&nbsp; <span class="example">&nbsp; &nbsp; <span class="blur_filter_on">&nbsp; &nbsp; &nbsp; &nbsp; <span id="hint">This is</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>the sentence i use as an</span>&nbsp; &nbsp; </span>&nbsp; &nbsp; example.&nbsp; </span></div><a class=hint href="#" onclick="showHint('hint')">BUTTON</a>