JQuery常见的CSS选择器

Question

我有:

<div class="abc" style="transform : [stuff]"></div>
which displays in chrome as
<div class="abc" style="-webkit-transform : [stuff]"></div>

所以我想[stuff]用一个选择器从这两个中获取.

$(".abc").css('whatcomeshere?')

有没有像我在这里可以使用的正则表达式？还有其他方法吗？我想有一个简单的方法,因为处理这些事情在JQuery中很常见.

编辑:澄清

我不是在寻找从变换矩阵中检索角度或元素的方法.

我只是在寻找一个选择这将同时检索transform和-webkit-transform风格$(".abc").css('transform')不适合这两种工作.

Answer 1

编辑下面的评论，说这对您的 jQuery 和 Chrome 版本不起作用。

您始终可以回退到style元素上的属性：

var abc = $(".abc")[0];
var transform = abc.style.transform || abc.style.webkitTransform;

实例

对于我来说，我的 Chrome 版本在 64 位 Linux 上，abc.style.transform返回undefined（这是有道理的，我只设置了供应商前缀的版本）并abc.style.webkitTransform返回样式信息。所以上面的代码会返回第一个不是的undefined。

$(".abc").css("transform")应该将其返回给您，jQuery 标准化了供应商前缀。

这是一个使用此的实例div：

<div class="abc" style="-webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 60% 100%;">foo</div>

这段代码：

jQuery(function($) {
  display("$('.abc').css('transform') = " + $(".abc").css("transform"));
  display("$('.abc').css('-webkit-transform') = " + $(".abc").css("-webkit-transform"));

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
});

哪个输出（在 Chrome 上）：

$('.abc').css('变换') = 矩阵(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

$('.abc').css('-webkit-transform') = 矩阵(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

请注意，我只有 上的前缀版本div，但为我提供了和css的相同信息。transform-webkit-transform