Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

只需附加标题

即可

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

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

3 个答案: