如何使用JavaScript编辑CSS标签

Question

我有一个页面，在那里我使用CSS和Javascript来编辑值，比如：

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

然而，在这种情况下，我似乎无法使其工作，因为我无法访问#Image1

#Image1=/=element.style

HTML，CSS代码

我试图做的是使用id＝"来改变动画播放状态；图像1"；。有什么解决方案吗？

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";