如何解决为 html 编辑器应用条件 css 样式表
例如
我有一个名为“filter”的 css 文件,其中包含代码:
monochrome {
filter: grayscale(var(--value,100%)); --value:100%;
}
将编辑器的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?*
}
解决方法
第一步是将 CSS 单色 定义转换为一个类。这只是通过在名称前添加一个点来完成的,例如
.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">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。