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

【问题标题】：How to edit CSS hashtags using JavaScript如何使用 JavaScript 编辑 CSS 主题标签
【发布时间】：2020-10-22 17:28:19
【问题描述】：

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

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

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

#Image1 =/= element.style

HTML,CSS Code

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

您正在设置元素的inline style，不是#Image 块应用的样式。

如果您想编辑 #Image 块应用的样式，可以使用 some browser support 使用 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>

【讨论】：

所以我尝试了你的方法，当我根据我的需要改变它时它做了一些事情。我添加的代码是：和 JS 代码是： document.getElementById('Image1').classList.add("#Image1");它完成了这项工作，但是它创建了一个新类而不是编辑现有的类。
对，classList.add 将添加一个新类。同样，我建议不要尝试修改样式表应用的类，而是通过修改元素的类列表来控制将哪些预定义类应用于元素。抱歉，如果我无法解释这一点。

【解决方案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";

【讨论】：