How to get whole style attribute at once in jquery

Question

I have div in my html. On a button click event, I want to get all style attribute at once, so that I can use it for another task

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

It gives undefined. What I want is this as console.

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

score 1 · Answer 1 · answered Oct 11 '17 at 06:15

Use jQuery#attr function to the attribute style instead of the jQuery#css - which returns the properties of the style.

For individual style properties you can use jQuery#css, passing the property name, for example .css('display') and get the value of the display property.

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

score 0 · Answer 2 · answered Oct 11 '17 at 06:16

Call with 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>

score 0 · Answer 3 · answered Oct 11 '17 at 06:17

Use 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">

How to get whole style attribute at once in jquery

3 Answers3