Question

我正在尝试添加“过滤器：模糊 5px；”单击某个按钮时，将 CSS 影响到 Id。我想知道如何在按下按钮时使用 JavaScript eventListener 或类似的东西更改 CSS。

Answer 1

您可以通过选择要应用样式的 DOM 元素然后在事件侦听器中将所需样式添加到所选 DOM 元素来实现。您还可以切换应用于 DOM 元素的类。检查下面的代码片段：

const btn = document.querySelector("#btn");
const text = document.querySelector("#text");

const btn2 = document.querySelector("#btn2");
const text2 = document.querySelector("#text2");

btn.addEventListener("click", (e) => {
  text.style.filter = `blur(3px)`
});

// Or you can toggle a class on the text element
btn2.addEventListener("click", () => {
  text2.classList.toggle("blur");
});

.blur {
 filter: blur(3px);
}

<div id="text">Hope! This answer is useful</div>
<button id="btn">Blurs the text above</button>

<div id="text2">Thanks for upvoting ;)</div>
<button id="btn2">Toggles blur class on the text above</button>

Answer 2

let
button =document.getElementById("btn");
div = document.getElementById("div");
button.onclick = function blur(){

    div.style.filter = `blur(5px)`
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>index</title>


</head>
<body>
    <div id="div"><h1>hello world</h1> </div>
    <button id="btn"> add blur</button>

<script src="test.js"></script>
</body>
</html>

Answer 3

JavaScript 在 style 上提供 HTMLElement 属性。

就像获取元素一样简单（关于 here 的教程）。

示例：

const btn = document.querySelector("#id-of-button");

然后，（如果该元素存在），您可以像这样访问样式属性：

btn.style = "filter: blur(5px);";

此外，如果您不想重置样式属性，您可以像这样获得您想要更改的特定样式：

btn.style.filter = "blur(5px)";

请注意，您不必在末尾添加分号（如果这样做实际上将不起作用）。

此外，CSS 中用短划线分隔的元素样式属性（如 flex-direction，以驼峰式命名，如下所示：btn.style.flexDirection）。

您可以使用 addEventListener 函数添加事件侦听器：

btn.addEventListener("click", function(event){
  btn.style.filter = "blur(5px)";
});

您可以使用传递给函数的 event 参数来获取有关事件的更多信息，例如触发事件的原因、单击的类型（右键单击或左键单击）等

编辑：

我忘了注意您想在单击按钮时更改另一个元素的样式。

为此，您只需将事件侦听器更改为：

btn.addEventListener("click", function(event){
  document.querySelector("#id-of-div").style.filter = "blur(5px)";
});

是否可以使用 JavaScript 更改 CSS？

3 个答案: