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

Adding CSS to head tag from the body using jQuery

本文关键字：head 标签 正文 jQuery CSS 添加 使用      更新时间：2023-09-26

我已经看到了两种使用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);
  }

显然第一个要短得多，但它是否不太被接受？

我认为

这是一个可读性与性能的问题。

人们会争辩说(他们通常是正确的(用原始的Javascript方式做事比用jQuery ---做事要快，为什么不呢？jQuery从你正在做的事情中抽象出原始的Javascript调用，以呈现漂亮的语法和便利性。这意味着在使用jQuery时，你将产生额外的开销，因为你的命令将在它的内部曲折前进，直到它到达它将你正在做的事情"翻译"为原始Javascript代码的部分。

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

老实说，这是一个你想做什么和做什么的问题。在这里，我想说原始Javascript的好处可以忽略不计。在jQuery中点击它。

您的第一个选项是将CSS添加到head部分的可接受方式。 使用JQuery将提供最跨浏览器兼容的解决方案。

你说的accepted是什么意思？当你使用jQuery时，你的代码只有一行，但jQuery框架很可能会像你在第二个实现想法中提到的一样。当你已经在使用jQuery时，你可能想坚持使用jQuery。但是，如果您仅将其用于该目的，请不要包含整个框架。

相关文章：