javascript - 使用 JavaScript 获取 CSS 声明

Question

我正在编写一个复杂的视觉效果，它会改变“box-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);

因此，算法如下:

1. var defaultShadow = elem.css("box-shadow");
2. 在 setInterval 中做一些事情。为默认阴影添加另一个阴影

问题出现了，当元素悬停时，效果脚本正在运行。在这种情况下，效果已经与在步骤 1 中获得的“defaultShadow”一起使用。

这更难，因为脚本中声明的阴影出现在“style”属性中，并且所有使用外部 CSS 声明的规则都将被覆盖。

有没有办法使用 JavaScript 为相关元素获取在 .css 文件中声明的 CSS 样式。我还需要元素状态的样式，例如“:hover”、“:active”等。

Answer 1

Is there a way to get CSS styles, declared in a .css file, for element in question, using JavaScript. I need also styles for states of the element, like "hover", "active" etc.

您应该能够修改 cssRules使用 JavaScript 对象创建您自己的规则，而不是依赖内联样式。

查看此 blog post了解更多信息。

IE 示例:

document.styleSheets[0].addRule("p .myclass", "font-size: 120%");

Firefox 示例:

document.styleSheets[0].insertRule("p{font-size: 20px;}", 0);

引用 doc这些被发现了。