Remove inline css of an HTML elements

Question

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?

not working how? you won't see the z-index removed from the 'view source' output. — Marc B
– Marc B, Commented Jan 17, 2013 at 16:32

ᴍᴇʜᴏᴠ · Accepted Answer · 2020-07-09 08:27:57Z

28

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

element.removeAttribute("style")

edited Jul 9, 2020 at 8:27

ᴍᴇʜᴏᴠ

5,3494 gold badges48 silver badges61 bronze badges

answered Jan 17, 2013 at 16:33

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Glen Selle Over a year ago

Much cleaner syntax and simpler syntax. I like this solution the best.

Shahor Over a year ago

The problem with this solution is that it removes all the CSS you set but also things you didn't. In the event where there are already styles defined you're going to remove everything. =/

hitautodestruct · Accepted Answer · 2013-01-18 14:04:14Z

5

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 = '';

edited Jan 18, 2013 at 14:04

answered Jan 17, 2013 at 16:43

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

Comments

DA. · Accepted Answer · 2013-01-17 16:45:52Z

2

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.

answered Jan 17, 2013 at 16:45

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Comments

Bertrand · Accepted Answer · 2013-01-17 16:56:10Z

0

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.

edited Jan 17, 2013 at 16:56

answered Jan 17, 2013 at 16:44

Bertrand

13.6k5 gold badges41 silver badges48 bronze badges

1 Comment

DA. Over a year ago

You don't need to use regex for this. Simply set the value of the property you want to remove to blank ""

Collectives™ on Stack Overflow

Remove inline css of an HTML elements

4 Answers 4

2 Comments

Reset z-index to initial value

Remove style attr

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Reset z-index to initial value

Remove style attr

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related