我正在写一个复杂的视觉效果,即改变“盒子阴影”属性。用JavaScript获取CSS声明
让我们简单地说一下,只需命名shadow(1pt 1pt 3pt rgba(...))的值,就像“shadow”一样。
我有一个样式表和问题的HTML元素。
元素有,比方说,“shadow1”为正常状态定义的值,而“shadow2”为悬停状态:
.elem {
box-shadow: #333 1pt 1pt 3pt; /* shadow1 */
}
.elem:hover {
box-shadow: #666 3pt 3pt 5pt; /* shadow2 */
}
我的脚本将它自己的影子,以现有的一个。所以:
box-shadow: shadow1, shadow2
这很容易实现。我只需要做以下,使用jQuery:
var defaultShadow = elem.css("box-shadow");
elem.css("box-shadow", defaultShadow + ", " + anotherShadow);
因此,算法如下:
var defaultShadow = elem.css("box-shadow");
- 做一下的setInterval。添加另一个阴影到默认的一个
问题出现时,当元素被徘徊,影响脚本运行。在这种情况下,效果已经与在步骤1中获得的“defaultShadow”一起工作。
它更难,因为在脚本中声明的阴影出现在“style”属性中,并且所有使用外部CSS声明的规则正在被覆盖。
有没有一种方法可以使用JavaScript来获取CSS文件中声明的CSS样式,用于有问题的元素。我还需要样式元素的状态,比如“:徘徊”,“:激活”等
请编辑更多信息。仅限代码和“尝试这个”的答案是不鼓励的,因为它们不包含可搜索的内容,也不解释为什么有人应该“尝试这个”。 – abarisone 2016-09-06 14:28:36