Question

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

现在我这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你可以：

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

你可以从css选择器中获得很多，在这里阅读更多关于它的信息

你必须记住的30个CSS选择器， here.

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

您可以使用universal selector选择所有后代元素，然后使用.addBack() method添加回初始元素：

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

或：

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

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

3 个答案: