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;

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') = 矩阵(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 提供了相同的信息。

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;
}