如何获取元素参数化的属性

83 阅读1分钟

之前一篇关于颜色自动计算的文章已经说过,我的插件所有元素的 style,都已经是通过 css 参数进行自动计算而来了。

这让我碰到了一个问题,如下图实际插件运行的页面所示,我需要在文章的右侧附加一个浮动的按钮。

这个按钮用来退出对这个内容的深度阅读。 image.png 它必须满足如下要求,第一,它是一个 FAB floating action button,不属于 dom flow。第二,它必须依附在文章的边缘上,在用户进行翻页,滚动,缩放等操作时都要保持位置,第三它的背景颜色必须和正文一致,令得用户以为它就是正文的部分。最后它还有一段动画,用户看着它从内容页面边缘生长出来。

前两点比较好做到,不是重点。

第三点我碰到了麻烦,即用 $article.style.backgroundColor,根本得不到想要的背景颜色数据。

这个元素的背景色并不是继承,而是直接指定的,没理由啊,通过 devtool 查看,发现是一个参数化的颜色。

image.png 果然style.backgroundColor 处理不了参数化的颜色。

咋办呢,想到了一个很多年前用过的老方法。

getComputedStyle($article ,null).getPropertyValue('background-color');

问题解决了!

显然浏览器的实现,把参数化的颜色也是算作了计算属性的范畴呢。