How Can I Get All The Properties From The Class Or Id On Click Using Jquery?

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;

Solution 1:

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>