Question

我已经看过两种使用JavaScript和jQuery从主体添加CSS到头部的方法，这是首选吗？

$('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

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

Answer 2

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

人们会争辩（并且他们通常是正确的）以原始Javascript方式执行操作比使用jQuery更快 - 并且为什么不会这样？ jQuery从你正在做的事情中抽象出原始的Javascript调用，以提供良好的语法和方便性。这意味着你在使用jQuery时会产生额外的开销，因为你的命令将在它内部进行zig和zag，直到它将你正在做的内容“转换”为原始的Javascript代码。

但是再一次，编写原始的Javascript代码不仅可以不时地繁琐（只看所有代码！），而且还容易受到跨浏览器问题（jQuery试图规范化），并且可能更难读给不熟悉的人。性能优势真的值得吗？

老实说，这是你想要做的地方和事情的问题。在这里，我要说原始Javascript的好处可以忽略不计。在jQuery中点击它。

Answer 3

accepted你是什么意思？当您使用jQuery时，您的代码只有一行，但jQuery框架很可能与您在第二次实现的想法中提到的相同。当你已经在使用jQuery时，你可能想要坚持使用jQuery。但是如果你只是为了那个目的而使用它，那就不要包括整个框架。

使用jQuery从主体添加CSS到head标签

3 个答案: