删除元素及其所有子元素的内联CSS的最快方法？

Question

我想从一个元素及其所有子元素中删除所有内联CSS。

现在，我这样做：

 $('#element').attr('style', ''); $('#element').find('div').attr('style', ''); $('#element').find('a').attr('style', ''); $('#element').find('span').attr('style', ''); $('#element').find('p').attr('style', ''); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="element" style="color:red"> <div id="childrenA" style="background: red"> <a href="#" style="text-decoration:underline">bla bla</a> </div> <div id="childrenB" style="width: 100px"></div> <span style="height:50px"><p style="overflow:hidden"></p></span> </div> 

但这是很多代码。...有没有更快的方法？

Answer 1

您可以：

$('#element, #element *').attr('style','');

您可以从CSS选择器中实现很多功能，请在此处详细了解

您必须记住的30个CSS选择器。

Answer 2

最简单的方法是：

 $('#element, #element *').removeAttr('style'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="element" style="color:red"> <div id="childrenA" style="background: red"> <a href="#" style="text-decoration:underline">bla bla</a> </div> <div id="childrenB" style="width: 100px"></div> <span style="height:50px"><p style="overflow:hidden"></p></span> </div> 

从字面上看-找到#element及其下的任何元素，然后删除它们可能具有的所有style属性。

Answer 3

您可以使用通用选择器选择所有后代元素，然后使用.addBack()方法添加回初始元素：

$('*', '#element').addBack().removeAttr('style');

要么：

$('#element').find('*').addBack().removeAttr('style');