javascript - 动态更改 css 属性的正确方法？

Question

我的网站响应用户交互，使用 jquery 动态创建 div。 div 内部将有一个包含时间戳的跨度以显示其创建时间，用户可以单击一个按钮来显示或隐藏时间戳跨度。

我遇到了一个问题，当用户选择隐藏时间戳时，您如何防止显示 future 动态添加的跨度？引用这个问题Create a CSS rule / class with jQuery at runtime ，我在头部动态添加了一个样式标签。但是，我还打算让用户能够从下拉列表中选择一种字体并更改 div 中文本的字体样式。按照这种方法现在看来会产生很多开销。

这两个问题都围绕同一个问题:更改已经存在的元素和任何 future 动态创建的匹配元素的 css 样式，但我不确定上面提到的方法真的是最好的解决方案吗？

编辑:片段

$(function() {
  $('#add').click(function() {
    $('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
  });

  $('#hidetime').click(function() {
    $(this).text(function(i, text) {
      if (text === "Hide Time") {
        $("<style>").prop("type", "text/css")
          .html(".time {display: none}").appendTo("head");
        return "Show Time";
      } else {
        $('style').remove();
        return "Hide Time";
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<div id='display'>

</div>

Answer 1

您没有提供任何代码进行调试，但您可以通过在 container 元素上切换一个类(例如 notimestamps)来进行调试。

然后在您的主要 CSS 代码中，您可以简单地执行以下操作:

.container.notimestamps span {
    display:none;
}

如果您要更改字体样式，您可以执行非常类似的操作。

例子:

.container.font-arial {
   font-family: arial, sans-serif;
}
.container.font-tahoma {
   font-family: tahoma, sans-serif;
}

使用您最近添加的示例，您可以将其更改为:

$(function() {
  $('#add').click(function() {
    $('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
  });

  $('#hidetime').click(function() {
    $('#display').toggleClass('notimestamp');
  });
  $('#font').change(function() {
    $('#display').attr('data-font', $(this).val());
  });
});

#display.notimestamp span {
  display:none;  
}
#display {
  font-family:sans-serif;  
}
#display[data-font="arial"] {
  font-family:Arial;  
}
#display[data-font="georgia"] {
  font-family:Georgia;  
}
#display[data-font="tahoma"] {
  font-family:Tahoma;  
}
#display[data-font="tnr"] {
  font-family:"Times New Roman";  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<select id="font">
  <option value="arial">Arial</option>
  <option value="georgia">Georgia</option>
  <option value="tahoma">Tahoma</option>
  <option value="tnr">Times New Roman</option>
</select>
<div id='display'>

</div>