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

使用removeAttribute方法，如果你想删除所有你用javascript手动添加的内联样式。

element.removeAttribute("style")

Answer 2

将 z-index 重置为初始值

您可以简单地将 z-index 重置为其初始值，使其表现得就像没有样式声明的 li 一样：

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

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

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

Answer 3

如果要删除所有内联样式，Pranay 的回答是正确的：

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

如果您只想删除一个样式属性，例如 z-index，则将其设置为空值：

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

来自 jQuery 文档 (http://api.jquery.com/css/)：

将样式属性的值设置为空字符串——例如$('#mydiv').css('color', '') - 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式属性中，通过 jQuery 的 .css() 方法，还是通过直接应用样式属性的 DOM 操作。

Answer 4

这是我认为更好的方法，因为它只删除 z-index 样式而不是整个样式属性。这是一个有效的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, '');
  });
});

希望对你有帮助。