Javascript 使用jQuery将CSS添加到主体的head标记

我见过两种使用JavaScript和jQuery将CSS从主体添加到HTML页面头部的方法，首选哪种

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

---

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

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

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

人们会争辩说（通常他们是正确的），用原始Javascript的方式做东西比用jQuery做要快——为什么不呢？jQuery从您正在做的事情中抽象出原始Javascript调用，以提供良好的语法和便利性。这意味着您在使用jQuery时会产生额外的开销，因为您的命令会在它的内部来回移动，直到它将您正在做的事情“转换”为原始Javascript代码为止

但话说回来，编写原始Javascript代码不仅有时会很乏味（看看所有的代码！），而且容易受到跨浏览器问题的影响（jQuery试图规范化这些问题），而且不熟悉的人更难阅读。性能优势真的值得吗

---

老实说，这是一个你想在哪里做什么的问题。在这里，我要说的是，使用原始Javascript的好处可以忽略不计。在jQuery中找到它

你所说的被接受的

是什么意思？当您使用jQuery时，您的代码只有一行，但是jQuery框架很可能会像您在第二个实现想法中提到的那样做。当您已经在使用jQuery时，您可能希望继续使用jQuery。但是，如果你只是为了这个目的而使用它，就不要包含整个框架。
至少第二个框架不起作用，因为它缺少附加到
headElement
@VisioN中，
gEBTN
返回一个类似数组的结构；您需要从返回的值中提取第一个元素
var headElement=document.getElementsByTagName（'head'）[0]
  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);
  }