如何使用jQuery獲取類或id上的所有屬性？

Question

我想，我怎樣才能從單擊事件

意味着class和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> 

fiddle

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>