Javascript 单击按钮时调用新的CSS文件-但保留现有样式

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

这是可行的——但是，它似乎替换了所有css文件，并且只从我调用的新文件中提取样式。如何保持现有样式不变，并仅覆盖此新文件中的目标样式

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

---

只需附加到标题

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

$（'head'）。追加（''）；

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

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

/*创建新元素*/
var newLinkElement=$（''）.attr（'href'，'foo.css'）；
/*附在头上*/
$（'head'）。追加（$（newLinkElement））；

函数添加样式（url）{
$（''）。附于（'head'）；
}
$（函数（）{
$（“按钮”）。单击（函数（）{
addStyles（'foo.css'）；
});
});

这个问题被多次回答：您的代码不工作，因为它没有做您认为应该做的事情。您正在替换而不是添加。重复解决方案I（和其他）已为您提供了所需结果的答案。

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

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