为什么此代码在 Firefox、Safari 和 Edge 上无法正常工作

Question

两天前我问了一个关于堆栈溢出的问题。 How can I get all the properties from the class or id on click using jQuery?

我只想知道为什么这段代码在 Firefox、Safari 和 Edge 中不能正常工作，我该如何解决。

$(".sample").click(function() {
  var html = [],
    x = $(this).css([
      "margin", "padding", "color", "border"
    ]);

  $.each(x, function(prop, value) {
    html.push(prop + ": " + value);
  });

  $("#result").html(html.join("<br>"));


})

关于代码：

代码用于获取元素的css属性。

问题：

正如我上面所描述的，问题是由@wazz 报告的，谢谢。

请查看给定链接中的评论部分。

先谢谢了。

更新：这是我的完整代码

$(".sample").click(function() {
  var html = [],
    x = $(this).css([
      "margin", "padding", "color", "border"
    ]);

  $.each(x, function(prop, value) {
    html.push(prop + ": " + value);
  });

  $("#result").html(html.join("<br>"));


})

.sample {
  margin: 10px;
  color: #000;
  padding: 5px;
  border: 1px solid #4073ff;
}

#test {
  background: url(../sample.jpg) 20px 20px no-repeat cover red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<button class="sample">Click</button>

Answer 1

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);
var keys = Object.keys(style); // will give margin,padding,color etc as keys  
var marginRight = style.margin-right;

这将为您提供一个以键为属性名称的样式对象。像魅力一样在 Firefox 中工作

Answer 2

它应该可以工作，与浏览器无关。我想问题可能如下： 1. $(".sample") 选择器可能返回多个对象。 2. 还要检查 $(this) 是否为您提供了您想要的确切 DOM？