1

我见过两种使用 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);
  }

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

4

3 回答 3

1

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

于 2012-05-10T13:47:41.360 回答
1

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

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

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

老实说，这取决于您在哪里以及尝试做什么。在这里，我想说的是使用原始 Javascript 的好处可以忽略不计。在 jQuery 中实现这一点。

于 2012-05-10T13:49:27.930 回答
1

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

于 2012-05-10T13:49:58.130 回答