将z-index重置为初始值

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

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

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

Answer 2

将z-index重置为初始值

你可以简单地将z-index重置为它的初始值，使其在没有样式声明的情况下表现得像li那样：

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

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

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

删除样式attr

您可以使用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, '');
  });
});

希望它有所帮助。

删除HTML元素的内联css

4 个答案:

将z-index重置为初始值

删除样式attr