如何使用jQuery单击该类或ID的所有属性？

Question

我想要如何从单击事件中的类或ID获取所有属性

意思是，假设我有class和id：

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

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

现在点击事件我想要所有

类属性打印如下

<div id="cProperties">
  <h6>All properties from class comes here</h6>

  margin = 10px
  color = #000
  padding = 5px
  font-size = 60px
  border size = 1px 
  border style = solid
  border color = #4073ff

</div>

和id属性打印如下

<div id="iProperties">
    <h6>All properties from id comes here</h6>

    background url = url(../sample.jpg)
    top = 20px 
    center = 20px
    repeteation = no-repeat 
    attachment = cover
    color = red  

 </div>

小提琴

Answer 1

您可以使用jquery .css方法检索属性。

希望此片段有用

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