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

のためにそれを使用できるように、ボタンのクリックイベントでは、私は一度にすべてのスタイル属性を取得したい、それは未定義与えます。私が欲しいのは、これをコンソールとして使うことです。 styleのプロパティを返す代わりに - jQuery#cssの属性styleに

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

Answer 1

使用jQuery#attr機能。

個々のスタイルプロパティについては、jQuery#cssを使用し、プロパティ名（例：.css('display')）を渡してdisplayプロパティの値を取得できます。 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 2

コール。

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

Answer 3

使用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">Get style</button>