如何使用jQuery获取类或id上的所有属性？ [英] How can I get all the properties from the class or id on click using jQuery?

问题描述

我想如何从类或id点击事件中获取所有属性

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

  .sample {
 margin：10px; 
颜色：＃000; 
 padding：5px; 
 border：1px solid＃4073ff; 
} 
 
 #test {
 background：url（../ sample.jpg）20px 20px不重复覆盖红色; 
} 
  

现在点击事件我想要所有的

类属性打印像这样

 < div id =cProperties> 
< h6>来自班级的所有属性都在这里< / h6> 
 $ b b margin = 10px 
 color =＃000 
 padding = 5px 
 font-size = 60px 
 border size = 1px 
 border style =固体
 border color =＃4073ff 
 
< / div> 
  

和id属性打印如下

 < div id =iProperties> 
< h6>来自id的所有属性都在这里< / h6> 
 
 background url = url（../ sample.jpg）
 top = 20px 
 center = 20px 
 repeteation =不重复
 attachment = cover 
 color = red 
 
< / div> 
  

.css

希望这段代码有用

  $（。sample）。click（function（）{var html = []，x = $（this）.css（[margin， （），color，border]）; $ .each（x，function（prop，value）{html.push（prop +：+ value）;}）; $（＃result）。 html（html.join（< br>））;}） 

  .sample {margin：10px;颜色：＃000;填充：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>点击< / button>  

I want that how can I get all the properties from the class or id on click event

Means, suppose I have class and id:

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

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

now on click event I want all the

class properties print like this

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

and id properties print like this

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

fiddle

解决方案

You can use jquery .css method to retrieve the properties.

Hope this snippet will be useful

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

这篇关于如何使用jQuery获取类或id上的所有属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！