Javascript 删除 HTML 元素的内联 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14383668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove inline css of an HTML elements
提问by Henry Gunawan
I'm using wordpress 3.5 and create menu with submenus. It's structured like this:
我正在使用 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>
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.
问题是带有子菜单的菜单，它会自动附加一个值为 100 的 z-index。我不希望它像那样，因为它给我添加 lavalamp 效果给这些菜单带来了麻烦。
I tried to edit the z-index by using jquery just after the menu is created using wp_nav_menus simply like this:
在使用 wp_nav_menus 创建菜单后，我尝试使用 jquery 编辑 z-index，就像这样：
jQuery(document).ready(function(){
jQuery("#menu3").css("z-index", "0");
});
But unfortunately, it doesn't work. How can I remove that inline css style?
但不幸的是，它不起作用。如何删除该内联 css 样式？
回答by Pranay Rana
Use the removeAttrmethod, if you want to delete all the inline style you added manually with javascript.
removeAttr如果要删除所有使用 javascript 手动添加的内联样式，请使用该方法。
$("#elementid").removeAttr("style")
回答by hitautodestruct
Reset z-index to initial value
将 z-index 重置为初始值
You could simply reset the z-index to it's initial value causing it to behave just like the liwould without the style declaration:
您可以简单地将 z-index 重置为其初始值，使其行为就像li没有样式声明的那样：
$(function(){
$('#menu3').css('z-index', 'auto');
});
You can go vanilla and use plain javascript (code should run after your menu html has loaded):
你可以去 vanilla 并使用普通的 javascript（代码应该在你的菜单 html 加载后运行）：
// 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:
您可以使用 jQuery 从所有列表中删除样式属性：
Note:Keep in mind this will remove all styles that have been set to your element using the style attribute.
注意：请记住，这将删除使用 style 属性设置为元素的所有样式。
$(function(){
$('#menu3').removeAttr('style');
});
Or vanilla:
或香草：
// Vanilla
document.querySelector('#menu3').style = '';
回答by DA.
If you want remove all inline styles, Pranay's answer is correct:
如果要删除所有内联样式，Pranay 的答案是正确的：
$("#elementid").removeAttr("style")
If you want to remove just one style property, say z-index, then you set it to an empty value:
如果您只想删除一个样式属性，例如 z-index，则将其设置为空值：
$("#elementid").css("zIndex","")
From the jQuery documentation (http://api.jquery.com/css/):
来自 jQuery 文档（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.
将样式属性的值设置为空字符串 - 例如 $('#mydiv').css('color', '') - 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式中属性，通过 jQuery 的 .css() 方法，或通过样式属性的直接 DOM 操作。
回答by Bertrand
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.
这是我认为更好的方法，因为它只删除 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, '');
});
});
Hope it helps.
希望能帮助到你。
