javascript - 使用 jQuery 将 CSS 添加到正文中的 head 标签

Question

我见过两种使用 JavaScript 和 jQuery 将 CSS 添加到 HTML 页面正文头部的方法，哪种方法更受欢迎？

$('head').append("<style type='text/css'> my CSS <\/script>");

或

  var styleElement = document.createElement('style');
  var styleText = 'my CSS';
  var headElements = document.getElementsByTagName('head');
  styleElement.type = 'text/css';
  if (headElements.length == 1) {
    headElements[0].appendChild(styleElement);
  } else if (document.head) {
    document.head.appendChild(styleElement);
  }
  if (styleElement.styleSheet) { // IE
      styleElement.styleSheet.cssText = styleText;
  } else { // Other browsers
      var textNode = document.createTextNode(styleText);
      styleElement.appendChild(textNode);
  }

显然第一个要短很多，但接受度较低吗？

Answer 1

我认为这是可读性和性能的问题。

人们会争辩(他们通常是正确的)用原始 Javascript 方式做事比用 jQuery 做事更快——为什么不这样呢？ jQuery 从您正在做的事情中抽象出原始的 Javascript 调用，以提供良好的语法和便利性。这意味着您在使用 jQuery 时会产生额外的开销，因为您的命令会曲折地穿过它的内部结构，直到它到达将您正在做的事情“翻译”成原始 Javascript 代码的部分。

但话又说回来，编写原始 Javascript 代码不仅有时会很乏味(看看所有这些代码!)，而且容易受到跨浏览器问题的影响(jQuery 试图对其进行规范化)，而且可能更难读给外行。性能优势真的值得吗？

老实说，这取决于您要在何处以及要做什么。在这里，我想说使用原始 Javascript 的好处可以忽略不计。在 jQuery 中点击它。