Property not being updated

Question

I'm setting the z-index of a css property using this code :

$( ".myIcon").attr("z-index" , 1);

But the property is not updating correctly. When I inspect the attribute using Chrome developer tools the z-index remains the same. Is there something I need to fire after using .attr so that the property is updated by the browser ?

You must add position to it. Take a look at this: http://stackoverflow.com/questions/8201855/cant-change-z-index-with-jquery — Felipe Miosso, Nov 12 '13 at 11:35

score 2 · Accepted Answer · answered Nov 12 '13 at 11:35

2

z-index is a style property, you need to use .css() to set it

$( ".myIcon").css("z-index" , 1);

answered Nov 12 '13 at 11:35

Arun P Johny

384,651
66
527
531

score 0 · Answer 2 · answered Nov 12 '13 at 11:38

.attr() looks at the attributes of the element being targetted. z-index is a property of the style attribute, not an attribute in it's own right. In order to change the z-index, you must edit the style attribute on the element using .css()

Example:

$(".myIcon").css("z-index" , 1);

giving in the html:

<div class="myIcon" style="z-index: 1">

Property not being updated

2 Answers2