Remove inline css of an HTML elements

I'm using wordpress 3.5 and create menu with submenus. It's structured like this:

<ul class="menu">
    <li id="menu1">Menu 1</li>
    <li id="menu2">Menu 2</li>
    <li id="menu3" style="z-index:100;">
        Menu 3
        <ul class="submenu">
            <li id="submenu1">submenu1</li>
            <li id="submenu2">submenu2</li>
            <li id="submenu3">submenu3</li>
        </ul>
    </li>
</ul>

The problem is the menu with submenus, it's automatically attached a z-index with value 100. I don't want it to be like that because it gives me trouble on adding lavalamp effect to those menus.

I tried to edit the z-index by using jquery just after the menu is created using wp_nav_menus simply like this:

jQuery(document).ready(function(){
     jQuery("#menu3").css("z-index", "0");
});

But unfortunately, it doesn't work. How can I remove that inline css style?

Answers:

Answer

Use the removeAttr method, if you want to delete all the inline style you added manually with javascript.

$("#elementid").removeAttr("style")
Answer

Reset z-index to initial value

You could simply reset the z-index to it's initial value causing it to behave just like the li would without the style declaration:

$(function(){
    $('#menu3').css('z-index', 'auto');
});

You can go vanilla and use plain javascript (code should run after your menu html has loaded):

// If you're going for just one item
document.querySelector('#menu3').style.zIndex = 'auto';

Remove style attr

You could use jQuery to remove the style attributes from all your list:

Note: Keep in mind this will remove all styles that have been set to your element using the style attribute.

$(function(){
    $('#menu3').removeAttr('style');
});

Or vanilla:

// Vanilla
document.querySelector('#menu3').style = '';
Answer

If you want remove all inline styles, Pranay's answer is correct:

$("#elementid").removeAttr("style")

If you want to remove just one style property, say z-index, then you set it to an empty value:

$("#elementid").css("zIndex","")

From the jQuery documentation (http://api.jquery.com/css/):

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.

Answer

This is what I consider a better approach because it only removes the z-index style instead of the whole style attribute. Here is a working Fiddle.

//As commented by @DA this is enough
$("#elementid").css("zIndex","")

//this could be useful in another situation so I will leave it :) 
$(document).ready(function () {
  $('#menu3').attr('style', function(i, style){
    return style.replace(/\z-index\b[^;]+;?/g, '');
  });
});

Hope it helps.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.