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;

Live Example

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

$(".abc").css("transform")应该返回给你，jQuery规范化供应商前缀。

Here's a live example使用此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('transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

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

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

Answer 2

如果您想要特定的供应商前缀，请明确：

$(".abc").css('-webkit-transform');

在大多数情况下，除非您为特定供应商专门添加了不同的功能，否则通用css属性应该为您提供所需的值。

Answer 3

当您执行$('.abc').css('transform')时，jQuery会处理供应商前缀属性。

来自source code：

    cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];

// return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {

    // shortcut for names that are not vendor prefixed
    if ( name in style ) {
        return name;
    }

    // check for vendor prefixed names
    var capName = name.charAt(0).toUpperCase() + name.slice(1),
        origName = name,
        i = cssPrefixes.length;

    while ( i-- ) {
        name = cssPrefixes[ i ] + capName;
        if ( name in style ) {
            return name;
        }
    }

    return origName;
}

JQuery常见的CSS选择器

3 个答案: