如何使用 JavaScript 编辑 CSS 主题标签

Question

我有一个页面，我同时使用 CSS 和 Javascript 来编辑值，例如：

document.getElementById("Doc1").style.opacity = "value";

但是在这种情况下，我似乎无法使其工作，因为我无法到达 #Image1

#Image1 =/= element.style

HTML、CSS 代码

我想要做的是使用 id = "Image1" 更改动画播放状态。 有什么解决办法吗？

Answer 1

当您使用以下内容编辑元素的样式时：

document.getElementById("Doc1").style.opacity = "value";

您正在设置元素的内联样式，而不是#Image块应用的样式。

如果您想编辑#Image块应用的样式，浏览器可以使用insertRule()和deleteRule()等函数支持它。

我不会编辑样式表应用的样式，而是从元素中添加或删除类。

<div id="my-div" class="is-running">test</div>

<style>
  .is-running { animation-play-state: running; }
  .is-paused { animation-play-state: paused; }
</style>

<script>
  document.getElementById('my-div').classList.remove("is-running");
  document.getElementById('my-div').classList.add("is-paused");
</script>

Answer 2

您可以从字符串中删除 # 并使用getElementByID或仅使用 querySelector 并传递完整 ID。

id = id.replace("#","");

document.getElementById(id).style.opacity = "value";

或者

document.querySelector("#Image1").style.opacity = "value";

如果您的问题是animation-play-state部分，您可以使用此方法：

document.getElementById(id).style["animation-play-state"] = "paused";