去除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效果时遇到了麻烦。

我尝试使用jQuery在wp_nav_menus创建菜单后进行z-index编辑，就像这样：

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

但不幸的是，它不起作用。我该如何删除内联CSS样式？

- Henry Gunawan

---

为什么不起作用？你在“查看源代码”输出中看不到z-index被移除。 - Marc B

Answer 1

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

element.removeAttribute("style")

- Pranay Rana

---

更简洁和更简单的语法。我最喜欢这个解决方案。 - Glen Selle

这种解决方案的问题在于它会删除您设置的所有CSS以及您没有设置的所有内容。如果已经定义了样式，您将会删除一切。=/ - Shahor

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

- hitautodestruct

Answer 3

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

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

如果您想要删除一个样式属性，比如z-index，那么您可以将其设置为空值：

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

从jQuery文档中 (http://api.jquery.com/css/):

如果将样式属性的值设置为空字符串，例如$('#mydiv').css('color', '')，那么如果该属性已经被直接应用于元素，无论是通过HTML样式属性、通过jQuery的.css()方法还是通过直接DOM操作样式属性，在这种情况下，都会将该属性从元素中删除。

- DA.

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, '');
  });
});

希望能有所帮助。

- Bertrand

---

你不需要使用正则表达式来完成这个任务。只需将要删除的属性的值设置为空白 "" 即可。 - DA.