2011-03-04 68 views
1

我正在写一个复杂的视觉效果,即改变“盒子阴影”属性。用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); 

因此,算法如下:

  1. var defaultShadow = elem.css("box-shadow");
  2. 做一下的setInterval。添加另一个阴影到默认的一个

问题出现时,当元素被徘徊,影响脚本运行。在这种情况下,效果已经与在步骤1中获得的“defaultShadow”一起工作。

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

有没有一种方法可以使用JavaScript来获取CSS文件中声明的CSS样式,用于有问题的元素。我还需要样式元素的状态,比如“:徘徊”,“:激活”等

回答

3

有没有办法让CSS样式,在.css文件中声明 ,对问题元 ,使用JavaScript。我需要 也样式元素的状态, 像“盘旋”,“活动”等

你应该能够修改与JavaScript中的cssRules对象来创建自己的规则,而不是依靠内嵌样式的。

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

示例:

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

实施例:

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

参考doc这些发现。

0
document.getElementById("id").className = 'arrow_box 
+1

请编辑更多信息。仅限代码和“尝试这个”的答案是不鼓励的,因为它们不包含可搜索的内容,也不解释为什么有人应该“尝试这个”。 – abarisone 2016-09-06 14:28:36