getting css style property using javascript

Question

I have a image draggable and would like to save it via PHP so I decided to get the inner style and put it as value in input field, so I can get it via $_POST, but I am unable to find like if it would be a inner HTML data I could have get it via calling innerHTML syntax, but like so is there any way of getting style for the image

<div class="scott_img">
            <img id="uploadPreview" src="<?php echo (empty($data['profile_pic'])) ? "images/profile.jpg" : "uploads/" . $data['profile_pic']; ?>" style="style goes here">
            <span class="scouttag"></span>

        </div>
        <form method="POST" action="profile.php?uid=<?php echo $uid; ?>" enctype="multipart/form-data" style="text-align:center;">
            <input id="uploadImage" type="file" name="image" style="margin:auto;" />
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="hidden" id="uploadPreview1" value="need style here so i can save it to database" />
            <button type="submit" name="update_picture" class="btn_form">Update Picture</button>
        </form> 

        <img class="scott_line"src="images/line.png">

         <script>
            (function() {
                var elem = document.getElementById('uploadPreview');
                var val  = getComputedStyle(elem);
                document.getElementById('uploadPreview1').value = val;
              var $section = $('.scott_img').first();
              $section.find('#uploadPreview').panzoom({
                $zoomRange: $section.find(".zoom-range"),
                $reset: $section.find(".reset")
              });
            })();
          </script>

Thank you

what did getComputedStyle(elem) returns?

Naqash Malik
– Naqash Malik

2016-05-13 07:13:29 +00:00
Commented May 13, 2016 at 7:13 — Naqash Malik
– Naqash Malik, Commented May 13, 2016 at 7:13
value="[object CSSStyleDeclaration]"

Mark Alan
– Mark Alan

2016-05-13 07:24:21 +00:00
Commented May 13, 2016 at 7:24 — Mark Alan
– Mark Alan, Commented May 13, 2016 at 7:24

Manish Jesani · Accepted Answer · 2016-05-13 07:32:18Z

2

if you get element style tag (inline css)

   var a = document.getElementById('uploadPreview');
    var b=  a.getAttribute('style');
    alert(b);

if you get element css

var element = document.getElementById('uploadPreview'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

answered May 13, 2016 at 7:32

Manish Jesani

1,3555 gold badges22 silver badges40 bronze badges

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

2 Comments

Mark Alan Over a year ago

by using first i am getting null and your second point will only get value top i need these styles

Mark Alan Over a year ago

transform: matrix(2, 0, 0, 1, -90, 7); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none;

Kamyar Infinity · Accepted Answer · 2016-05-13 07:16:25Z

1

I'm not sure how and why you are going to use this server-side, but if you believe that's the right thing to do, just stringify the JSON object:

var val = JSON.stringify(getComputedStyle(elem));

answered May 13, 2016 at 7:16

Kamyar Infinity

2,7591 gold badge22 silver badges32 bronze badges

3 Comments

Mark Alan Over a year ago

style properties and style is this style="transform: matrix(2, 0, 0, 1, -2, 25); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none;" and i got everything as animation etc etc

Mark Alan Over a year ago

then is there anyother way i can get is i am getting it because when the image uis uploaded i need to save the style as when i will show image on user end the style will also be retrieved this is i am doing because i have placed image draggable jquery

Kamyar Infinity Over a year ago

So, it's much more complicated than simple images. It looks to me something like html2canvas can help you to take a screenshot from that portion of screen.

iuliu.net · Accepted Answer · 2016-05-13 07:58:30Z

0

You can get an element's CSS style in JS and transform it into JSON like so:

var elementCSS = JSON.stringify(document.getElementById('uploadPreview').style)

answered May 13, 2016 at 7:58

iuliu.net

7,1858 gold badges52 silver badges72 bronze badges

Comments

elreeda · Accepted Answer · 2016-05-13 08:20:54Z

0

since the Css value is in an input you have to get it via:

Var x = Document.getElementById("").value

Then in your java script, append the Css rules by doing;

X.style.width = Y;
Or div.style.color = "#ccc";

Hope you get the point

edited May 13, 2016 at 8:20

elreeda

4,6072 gold badges22 silver badges45 bronze badges

answered May 13, 2016 at 7:14

Mueyiwa Moses Ikomi

1,1422 gold badges13 silver badges27 bronze badges

4 Comments

Mark Alan Over a year ago

var elem = document.getElementById('uploadPreview').value; i got undefined in return

Mueyiwa Moses Ikomi Over a year ago

UploadPreview is the id for the image. You need to get the ids of the input boxes with the Css style values. According to ur code above, thats the hidden fields

Mark Alan Over a year ago

This is the style i want to get transform: matrix(2, 0, 0, 1, -90, 7); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none;

Mueyiwa Moses Ikomi Over a year ago

Yes, you can write all that using just javascript as instructed above

Trimantra Software Solution · Accepted Answer · 2016-05-13 08:29:26Z

0

Can't you use simple jQuery to get style value like below?

var imgstyle = $("#uploadPreview").attr("style"); //this will get your whole value of style attribute.
$("#uploadPreview1").val(imgstyle); //this will update hidden field's value.

also it seems that it is going to be different on each upload. So you can put this above code inside your draggable or file uplaod's change event.

answered May 13, 2016 at 8:29

Trimantra Software Solution

3,3273 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

getting css style property using javascript

5 Answers 5

2 Comments

3 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related