使用javascript獲取css樣式屬性

我有一個圖像draggable並希望通過PHP保存它，所以我決定獲取內部樣式並將其作爲輸入字段的值，所以我可以通過$_POST得到它，但我是無法找到一樣，如果它是一個內部HTML數據我可以通過調用innerHTML語法得到它，但像這樣有越來越樣式圖像的任何方式使用javascript獲取css樣式屬性

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

謝謝

來源

2016-05-13 Mark Alan

getComputedStyle（elem）'返回什麼？ –

value =「[object CSSStyleDeclaration]」 –

自Css值是在一個輸入，你必須通過它：

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

然後在你的java腳本中，通過做一些附加的Css規則;

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

希望你得到

來源

2016-05-13 07:14:29

var elem = document.getElementById（'uploadPreview'）。value;我得到了undefined作爲回報 –

UploadPreview是圖像的ID。您需要獲取具有Css樣式值的輸入框的ID。根據上面的代碼，這就是隱藏的字段 –

這是我想要獲得變換的樣式：matrix（2,0,0,1，-90,7）; backface-visibility：hidden; transform-origin：50％50％0px;光標：移動;過渡：無; –

我不知道如何以及爲什麼你要使用這個服務器端的，但如果你認爲這是做正確的事，只是字符串化的點JSON對象：

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

來源

2016-05-13 07:16:25

樣式屬性和樣式是這樣style =「transform：matrix（2,0,0,1,2,25）; backface-visibility：hidden; transform-原點：50％50％0px;光標：移動;過渡：無;「我得到了一切，如動畫等 –

然後有另一種方式，我可以得到的是我得到它，因爲當圖像uis上傳我需要保存樣式，因爲當我將顯示圖像在用戶端上樣式也將被檢索是我做，因爲我已經放置圖像可拖動jquery –

因此，它比簡單的圖像複雜得多。它看起來像[html2canvas]（http：//html2canvas.hertzen）。com）可以幫助您從屏幕的這一部分截取屏幕截圖。 –

，如果你得到元素風格標籤（內聯CSS）

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

如果你得到元素的CSS

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

來源

2016-05-13 07:32:18

通過使用第一我變空，你的第二點只會得到價值最高我需要這些風格 –

變換：矩陣（2,0,0,1，-90,7）; backface-visibility：hidden; transform-origin：50％50％0px;光標：移動;過渡：無; –

可以在JS得到一個元素的CSS樣式並將其轉換成JSON像這樣：

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

來源

2016-05-13 07:58:30

燦」你使用簡單的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的更改事件中。

來源

2016-05-13 08:29:26

使用javascript獲取css樣式屬性

回答

相關問題