CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7791702
user7791702

Reputation: 290

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

Upvotes: 0

Views: 133

Answers (1)

brk
brk

Reputation: 50336

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>

Upvotes: 1

Related Questions