Question

我有一个图像draggable，并希望通过PHP保存它，所以我决定获取内部样式并将其作为输入字段中的值，因此我可以通过$_POST获取它，但是我无法找到，如果它是一个内部HTML数据，我可以通过调用innerHTML语法得到它，但是像这样有任何方式获取图像的样式

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

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

Answer 2

我不确定你将如何以及为什么要使用这个服务器端，但如果你认为这是正确的事情，只需将JSON对象字符串化：

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

Answer 3

由于Css值在输入中，您必须通过以下方式获取：

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

然后在你的java脚本中，通过执行附加Css规则;

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

希望你明白这一点

Answer 4

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

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.

似乎每次上传都会有所不同。因此，您可以将上述代码放在可拖动或文件上传的更改事件中。

使用javascript获取css样式属性

5 个答案: