如何在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">