Question

我们的表单软件会生成许多内联style属性，我想删除它们。我知道这可以用$('div[style]').removeAttr('style')之类的东西快速完成，但不幸的是，我需要保留所有display:none，因为这些可以在以后显示，具体取决于条件选择。

基于https://stackoverflow.com/questions/2465158/is-it-possible-to-remove-inline-styles-with-jquery，我知道$('div').css('color', '');之类的内容可行，但我需要重复font-size，text-align等。

那么，什么是更有效的方式（最好使用jQuery）删除所有非display 的样式标记，最好是在链接/单行语句中？我想过使用:not，但无法弄清楚如何与上面的例子结合......

由于

Answer 1

您可以删除所有style属性，但使用您显示的选择器保留所有现有display: none标记，然后检测display: none并在删除样式后重新置位：

$("div[style]").each(function() {
    var hide = this.style.display === "none";
    $(this).removeAttr("style");
    if (hide) {
        this.style.display = "none";
    }
});

或者更一般地说，保持display属性，无论其值如何：

$("div[style]").each(function() {
    var display = this.style.display;
    $(this).removeAttr("style");
    this.style.display = display;
});

完整示例：Fiddle

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>Style Update</title>
</head>
<body>
  <div>No style</div>
  <div style="color: green">Green</div>
  <div style="color: red; display: none">Red, hidden</div>
  <div><button type="button" id="processStyle">Process style attributes</button></div>
  <div><button type="button" id="showHidden">Show hidden briefly</button></div>
  <p>Click "Show hidden briefly" first, then "Process style attribuets", then "Show hidden briefly" again.</p>
  <script>
    $("#processStyle").click(function() {
      $("div[style]").each(function() {
        var display = this.style.display;
        $(this).removeAttr("style");
        this.style.display = display;
      });
    });
    $("#showHidden").click(function() {
      $("div").each(function() {
        if (this.style.display === "none") {
          $(this).fadeIn('fast').delay(1000).fadeOut('fast');
        }
      });
    });
  </script>
</body>
</html>

Answer 2

您可以做的是存储您想要的样式（或样式），将它们全部删除，然后再次设置存储的样式。像这样：

 $('.selector').each(function() {
 var keepStyle, $el;
  $el = $(this);
  keepStyle = {
   display: $el.css('display')//use comma seprated css style for multiple style
   };

 $el.removeAttr('style')
   .css(keepStyle);
 })

Answer 3

none = false;
if($(selector).css('display')=='none')
    none = true;
$(selector).removeAttr('style');
if(none)
    $(selector).css('display','none');

jQuery：删除特定的样式标记

3 个答案: