jQuery从CSS中提取值

Question

如何提取样式属性

<div id="clipProperty" style="clip: rect(0px 281px 647px 0px);"></div>

将它添加到 #getClipValues 中，第二个值 281 减去 30，使其变为 clip: rect(0px 251px 647px 0px)。

 <div id="getClipValues"></div>

这是我的 JavaScript 代码。

var clipProperty = $('#clipProperty').attr('style');
$('#getClipValues').attr('style', clipProperty);

clipProperty属性并非常量，而是经常变化的。但我总需要从第二个值中减去30。

- Newcoma

---

“Want to…” 不是一个问题。你能加上一个实际的问题吗？带一个问号？ - Chrismas007

Answer 1

这样做就可以了：

var re = /rect\((\d+)px (\d+)px (\d+)px (\d+)px\)/;
var oldClip = $('#clipProperty').css('clip');
var newClipVal = oldClip.replace(re, "$2");
$('#getClipValues').css('clip','rect(0px '+(newClipVal-30)+'px 647px 0px)');

- j08691

---

我应该提到，#clipProperty的值不是恒定的，所以我需要计算旧的剪辑(oldClip)。 - Newcoma

它在IE 10中无法工作。newClipVal返回的是rect(0px, 766px, 842px, 0px)，而不是只有766px。你知道为什么吗？ - Newcoma

除了IE是一堆垃圾之外，好像没有其他问题。似乎与replace()有关。看起来IE使用逗号分隔值，而其他浏览器使用空格。正在寻找解决方法。 - j08691

尝试将第一行改为var re = /rect\((\d+)px,* (\d+)px,* (\d+)px,* (\d+)px\)/;。在IE10中对我有效。 - j08691

太棒了！非常感谢。 - Newcoma

Answer 2

你是否在寻找类似于这样的东西：

var clip = $('#clipProperty').attr('style'); 

var clip2 = $('#getClipValues').css('clip', 'rect(0px 231px 647px 0px');

我用jsFiddle做了一个小实验，得到了结果：http://jsfiddle.net/jtu5y1te/1/。

- dhershman