如何在jquery中一次獲得整個樣式屬性

Question

我在我的html中有div。點擊一個按鈕事件，我想所有的樣式屬性一次，這樣我就可以使用它的另一項任務

<div id=popUp style="display: block; z-index: 1050; top: 371px; left: 847.75px;"> 
     </div> 
    <button id="btn" value="submit"> 

$('#btn').on('click', function (event){ 
      var styleAttribute=$('#popUp').css('style'); 
console.log('styleAttribute',styleAttribute); 
     }); 

它給不確定的。我想要的是作爲控制檯。

display: block; z-index: 1050; top: 371px; left: 847.75px; 

Answer 1

使用jQuery#attr功能屬性style而不是jQuery#css - 它返回style的屬性。

對於個人風格的屬性，您可以使用jQuery#css，傳遞屬性名稱，例如.css('display')並獲取display屬性的值。

$('#btn').click(function(){ 
 
    var styleAttribute = $('#popUp').attr('style'); 
 
    console.log('styleAttribute ', styleAttribute); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="popUp" style="display: block; z-index: 1050; top: 371px; left: 847.75px"> 
 
</div> 
 
<button id="btn" value="submit">Get style</button>

Answer 2

呼叫與attr()

$('#btn').click(function(){ 
 
var styleAttribute=$('#popUp').attr('style'); 
 
console.log('styleAttribute',styleAttribute); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=popUp style="display: block; z-index: 1050; top: 371px; left: 847.75px;"> 
 
     </div> 
 
    <button id="btn" value="submit">click</button>

Answer 3

使用ATTR。

$("#btn").on("click", function() { 
 
    var styleAttribute = $('#popUp').attr('style'); 
 
    console.log(styleAttribute); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=popUp style="display: block; z-index: 1050; top: 371px; left: 847.75px;"> 
 
</div> 
 
<button id="btn" value="submit">