为 html 编辑器应用条件 css 样式表答案

【问题标题】：Apply conditional css style sheet for html editor为 html 编辑器应用条件 css 样式表
【发布时间】：2021-05-01 15:58:33
【问题描述】：

例如，

（如果）我有这个 HTML 格式的 2d 编辑器：

我有一个名为“filter”的css文件，代码如下：

monochrome {
    filter: grayscale(var(--value, 100%)); --value:100%;
}

在将编辑器的Dragon（龙精灵）放置到画布上时，有哪些方法可以对编辑器的Dragon应用“单色”滤镜？

<link rel="stylesheet" type="text/css" href="monochrome.css">
if (data[Blocks].id === "dragon") {
         
        *What should I write here in order to apply the css filter (only to the dragon sprite, when placing?*

}

【问题讨论】：

这取决于 Dragon 实际上是什么 - 它是 HTML Image 元素吗？它是一个DIV吗？是帆布吗？请提供您实际代码的工作 sn-p，清楚地显示您遇到的问题。
一个图像元素。

标签： html css html5-canvas

【解决方案1】：

第一步是将 CSS monochrome 定义变成一个类。这只需在名称前加一个点即可完成，例如

.monochrome {
    filter: grayscale(var(--value, 100%));
}

以这种方式定义它可以让多个 HTML 元素重复使用 - 因为您的 Dragon 可能不是您想要应用过滤器的唯一元素。

由于我们现在有一个 CSS 类，我们可以通过调用任一方法将其应用于单个对象

theObject.classList.add("monochrome");

或

theObject.classList.remove("monochrome");

虽然 add / remove 顾名思义是添加或删除引号中给出的 CSS 类。

但是我们如何获得对theObject 的引用？如果你使用它的 id 属性为你的 HTML 元素赋予了一个唯一的 id，那就很简单了：

document.getElementById("id")

不过要小心 - 它与您在帖子中提到的 id 不同。

这是一个例子：

document.getElementById("monochromeButton").addEventListener("click", function() {
  document.getElementById("dragon").classList.add("monochrome");
});
document.getElementById("removeButton").addEventListener("click", function() {
  document.getElementById("dragon").classList.remove("monochrome");
});

.monochrome {
  filter: grayscale(var(--value, 100%));
}

<button id="monochromeButton">
monochrome
</button>
<button id="removeButton">
remove filter
</button>
<br>
<img id="dragon" src="https://picsum.photos/id/237/200/140">

【讨论】：