Question

我在2天前就Stack溢出问了一个问题。 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报告谢谢。

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

提前感谢。

更新：这是我的完整代码

＆＃13;

$(".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>"));


})

＆＃13;

.sample {
  margin: 10px;
  color: #000;
  padding: 5px;
  border: 1px solid #4073ff;
}

#test {
  background: url(../sample.jpg) 20px 20px no-repeat cover red;
}

＆＃13;

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

＆＃13;

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一样在Firefox中运行

Answer 2

它应该工作，与浏览器无关。问题可以遵循我想： 1. $（＆＃34; .sample＆＃34;）选择器可能会返回多个对象。 2.还要检查$（this）为你提供你想要的DOM吗？

为什么此代码在Firefox，Safari和Edge上无法正常运行

2 个答案: