单击按钮时调用新的 CSS 文件 - 但保留现有样式 [重复]答案

【问题标题】：Call a new CSS file on button click - but keep existing styles [duplicate]单击按钮时调用新的 CSS 文件 - 但保留现有样式 [重复]
【发布时间】：2016-12-04 06:54:58
【问题描述】：

我有一个包含几个 CSS 文件的页面。单击按钮时，我想调用一个新的 CSS 文件（页面加载时不存在）。我希望其他 CSS 文件保持不变。

这行得通 - 但是，它似乎替换了所有的 css 文件，并且只从我调用的新文件中提取样式。如何保留现有样式并仅覆盖我在此新文件中的目标？

$(function () {
    $('button').click(function () {
        $('link').attr('href', 'foo.css');
    });
});

【问题讨论】：

这个问题在 SO 上被多次回答：stackoverflow.com/questions/5680657/adding-css-file-with-jquery
您的代码无法正常工作，因为它没有按照您认为的方式执行。您正在替换而不是添加。我（和其他人）提供的重复解决方案回答了您期望的结果。

标签： javascript jquery css attr

【解决方案1】：

  function addStyles(url){
     $('<link href="'+url+'" rel="stylesheet"/>').appendTo('head');
  }

  $(function () {
      $('button').click(function () {
          addStyles('foo.css');
      });
  });

【讨论】：

【解决方案2】：

实际上，您正在替换页面上链接元素的属性。您应该做的是创建新元素并将这个新创建的元素附加到页面。

/*create new element */
var newLinkElement = $('<link>').attr('href', 'foo.css');
/*append to head*/
$('head').append($(newLinkElement));

【讨论】：

【解决方案3】：

只需附加到标题

$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');

【讨论】：