我正在做一个独占板,每个块都是一个元素。我需要根据不同的条件使块变暗和变亮。为了改变亮度,我使用filter
属性。亮度将动态改变,所以我需要改变style.filter
。
现在有其他的属性,比如'drop-shadow'
,我想让它们成为常量,我已经在css文件中使用了它们。但是现在的问题是,这两个过滤器不能同时存在。有没有办法在css中合并style.filter
和filter
属性?
第一个
在上面的脚本中,我需要同时显示brightness
和drop-shadow
,但只有亮度起作用。
**注意:**在这个例子中我只讲了两个属性,但是在我的真实的代码中还有更多。我知道这个问题可以通过为css属性创建一个常量字符串,然后每次都将其连接到style.filter
来解决。但是我不想这样。
3条答案
按热度按时间qq24tv8q1#
使用CSS变量:
第一个
e0bqpujr2#
如果你设置了一个过滤器属性,你重写了它的所有字符串,而不是追加到它里面。所以你需要创建一个变量来存储所有的过滤器属性。例如,它可以是一个数组。然后在这个数组中推送或拼接你的属性,并用结果更新过滤器。例如:
然后更新筛选属性:
另一种方法是编写获取filter字符串的函数,将其转换为数组,然后执行与上面相同的操作。
要将CSS和element.style.filter结合起来,可以尝试如下操作:
lvjbypge3#