JQuery common CSS selector

Question

I have:

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

So I want to grab [stuff] from both of these with a single selector.

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

Is there something like regex I can use here? Any other method? I'd imagine there would be a straightforward method since dealing with such things would be commonplace in JQuery.

EDIT: CLARIFICATION

I am NOT looking for methods to retrieve the angle or an element from the transform matrix.

I'm simply looking for one selector which would retrieve both transform and -webkit-transform styles $(".abc").css('transform') doesn't work for both.

In regards to what `.css()` can do: Google "jquery css" and read the documentation.. — MDEV, Sep 24 '13 at 08:47
http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery hope its useful! — asharajay, Sep 24 '13 at 08:51
Duplicate of http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery or http://stackoverflow.com/questions/8601209/fetch-the-css-value-of-transform-directly-using-jquery or http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery — Michael Schmidt, Sep 24 '13 at 08:51

T.J. Crowder · Answer 1 · 2013-09-24T09:16:37.913

Edit as of your comment below saying this didn't work for you with your version of jQuery and Chrome.

You could always fall back to the style property on the element:

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

Live Example

For me, with my version of Chrome on 64-bit Linux, abc.style.transform returns undefined (which makes sense, I only set the vendor-prefixed version) and abc.style.webkitTransform returns the style information. So the above would return the first that wasn't undefined.

$(".abc").css("transform") should return it to you, jQuery normalizes vendor prefixes.

Here's a live example using this div:

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

And this code:

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

Which outputs (on 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)

Note that I only have the prefixed version on the div, but css gives me the same information for both transform and -webkit-transform.

Doesn't seem to be working on Chrome Linux 64bit. Selecting with `-webkit-transform` gives me the matrix, but `transform` does nothing. — user1265125, Sep 24 '13 at 09:02
@user1265125: **That's** interesting! When you say it isn't working, do you mean your code, or the live examplea bove? Are you using the same version of jQuery (v1.10.1) as the above? I'm also using 64-bit Linux, but a *slightly* outdated version of Chrome (26.0.1410.63). — T.J. Crowder, Sep 24 '13 at 09:12
@user1265125: I've updated the answer with a more direct approach. — T.J. Crowder, Sep 24 '13 at 09:16

score 0 · Answer 2 · answered Sep 24 '13 at 08:51

0

If you want a specific vendor prefix, just be explicit:

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

In most cases, unless you have specifically added different functionality for specific vendors, the generic css property should give you the value you need.

answered Sep 24 '13 at 08:51

bPratik

6,894
4
36
67

score 0 · Answer 3 · answered Sep 24 '13 at 08:55

jQuery deals with vendor prefixed properties when you do $('.abc').css('transform').

From the 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 common CSS selector

3 Answers3