使用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样式属性

回答

相关问题