5

我有：

<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')对两者都不起作用的选择器。

4

3 回答 3

4

编辑您在下面的评论，说这不适用于您的 jQuery 和 Chrome 版本。

您总是可以回退到style元素上的属性：

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

现场示例

对我来说，在 64 位 Linux 上使用我的 Chrome 版本会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('transform') = 矩阵(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

于 2013-09-24T08:49:56.830 回答
0

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

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

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

于 2013-09-24T08:51:06.813 回答
0

jQuery 处理供应商前缀的属性$('.abc').css('transform')。

从源代码：

    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;
}
于 2013-09-24T08:55:53.243 回答