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

Answer 1

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

Answer 2

我不确定如何以及为什么要使用此服务器端，但是如果您认为这样做是正确的，只需对JSON对象进行字符串化即可：

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

Answer 3

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

Answer 4

您可以在JS中获得元素的CSS样式，然后将其转换为JSON，如下所示：

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

Answer 5

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.