JavaScriptを使ってCSSスタイルのプロパティを取得する

Question

私は画像draggableを持っていて、PHPで保存したいので、内部のスタイルを取得して入力フィールドに値として入れましたので、$_POSTで取得できますそれは私がinnerHTML構文を呼び出しを通じてそれを得る可能性があり、内側HTMLデータだろうが、そうのようにそこには、画像のスタイルを取得する任意の方法

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

があるため

Answer 1

ありがとうの場合のように見つけることができませんCssの価値はあなたがそれを取得する必要がある入力にあります：

次に、あなたのJavaスクリプトで、Cssルールを追加します。

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

あなたは私がどのように、なぜあなたはこのサーバー側を使用しようとしているわからないんだけど、あなたがそれを行うには正しいことだと考えている場合は、単に文字列化ポイント

Answer 2

を得るホープJSONオブジェクト：

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

Answer 3

あなたは要素スタイルタグ（インラインCSS）

を取得する場合210

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

あなたはあなたがそうのようなJSONにJSで要素のCSSスタイルを取得し、それを変換することができ

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

Answer 4

要素のCSS取得する場合：

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

Answer 5

に」単純なjQueryを使って以下のようなスタイル値を取得しますか？

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

アップロードごとに異なるようにも見えます。だから、上記のコードをあなたのドラッグ可能なファイルまたはファイルuplaodの変更イベントの中に置くことができます。