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 ?

Answer 1

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

Answer 2

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

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