如何在jquery中一次获取整个样式属性[重复]答案

【问题标题】：How to get whole style attribute at once in jquery [duplicate]如何在jquery中一次获取整个样式属性[重复]
【发布时间】：2017-10-11 06:13:54
【问题描述】：

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

对属性style 使用jQuery#attr 函数而不是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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

使用属性。

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

【讨论】：