删除HTML元素的内联css

Question

我正在使用wordpress 3.5并使用子菜单创建菜单.它的结构如下:

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

问题是带有子菜单的菜单,它会自动附加一个值为100的z-index.我不希望它是这样的,因为它给我带来了麻烦,为这些菜单添加lavalamp效果.

在使用wp_nav_menus创建菜单之后,我尝试使用jquery编辑z-index,就像这样:

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

但不幸的是,它不起作用.如何删除内联css样式？

Answer 1

removeAttr如果要删除使用javascript手动添加的所有内联样式,请使用此方法.

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

Answer 2

将Z-index重置为初始值

您可以简单地将z-index重置为其初始值，使它的行为就像li没有样式声明时那样：

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

您可以使用普通的javascript（代码应在菜单h​​tml加载后运行）：

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

删除样式属性

您可以使用jQuery从所有列表中删除样式属性：

注意：请记住，这将删除使用style属性设置为元素的所有样式。

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

或香草：

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