Retrieve css property scaleX using JQuery

Question

I am trying to print out the properties of a particular div using JQuery. I would like the various css properties to appear in an information panel on the screen.

I am trying to display scaleX but having a lot of difficulty. This is my code currently:

//Size Control
$("#slider").change(function () {
    size = $("#slider").val();
    //Update the size of box while dragging
    b1.css({
        "-webkit-transform": "scaleX(" + size / 10 + ") scaleY(" + size / 10 + ") rotate(" + rotation + "deg) rotateX("+ rotateX + "deg) rotateY("+ rotateY + "deg) skew("+ skewX + "deg," + skewY + "deg)",
    });

    $("#sizeInfo").text("Size: " + b1.css("-webkit-transform"));

});

HTML

 <div id="b1"></div>

Output in info panel

matrix3d(-0.6998933866094739, -0.012216684506098372, 0.0000000000000001224646799147353, 0, 0.012216684506098542, -0.6998933866094739, 0.0000000000000001224646799147353, 0, 0.00000000000000008421610720791067, 0.00000000000000008720833192322797, 1, 0, 0, 0, 0, 1)

Any help is much appreciated.

What is this difficultly of which you speak? Where are things going wrong? — adamb
– adamb, Commented Oct 23, 2013 at 20:24
This difficulty of which I speak is that currently this line of code $("#sizeInfo").text("Size: " + b1.css("-webkit-transform")); does not output the value of scaleX — Javacadabra
– Javacadabra, Commented Oct 23, 2013 at 20:25

Explosion Pills · Accepted Answer · 2013-10-23 20:39:50Z

2

jQuery's .css wraps window.getComputedStyle which uses the computed style rather than the raw style information. You can use the style property on the element to get the actual string:

b1.get(0).style.WebkitTransform

answered Oct 23, 2013 at 20:39

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieve css property scaleX using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related