删除并添加CSS文件

Question

我要删除一个CSS文件并单击添加文件

删除我正在使用的文件

$('link[title="mystyle"]').remove();

一旦删除该文件，是否可以将其添加回DOM？

Answer 1

是的，只要保留对它的引用，并在要放回它时append / appendTo就可以了。

删除：

var link = $('link[title="mystyle"]').remove();

以后，当您想放回去时：

link.appendTo('head');

这是一个使用堆栈片段中的style元素执行此操作的示例，但是对于link ，它的工作原理相同：

 var style = null; setInterval(function() { if (style) { style.appendTo('head'); style = null; } else { style = $("style").remove(); } }, 800); 

 p { color: green; } 

 <p>Testing 1 2 3</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

如何不删除它，而是仅删除源href呢？

// remove
$('link[title="mystyle"]').data("href", $('link[title="mystyle"]').attr("href")).attr("href", "");

// bring back
$('link[title="mystyle"]').attr("href", $('link[title="mystyle"]').data("href"));

Answer 3

尝试这个

var link = '<link rel="stylesheet" type="text/css" href="' + YourFileName + '">'
$('head').append(link)

Answer 4

HTML：

<link id="custom" rel="stylesheet" type="text/css" href="style.css">
<a href="#" id="changeCss">Change CSS</a>

jQuery的：

$('#changeCss').click(function(){
  if($('#custom').attr('href') != ''){
    $('#custom').attr('href', '');
  }else {$('#custom').attr('href', 'style.css')}
  return false;
})

希望对您有用:)

Answer 5

只要您知道样式表的URL，就有多种选择：

var url = '//cdn.sstatic.net/Sites/stackoverflow/all.css';

/* Insert as HTML string: */
document.head.insertAdjacentHTML(
    'beforeend',
    '<link rel="stylesheet" type="text/css" href="' + url + '">'
);

/* Or, after removal, create a link element and append it: */
var styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.type = 'text/css';
styleLink.href = url;
document.head.appendChild(styleLink);

/* Or, remove it with jQuery and save its reference: */
var linkElement = $('link[title="mystyle"]').remove();
linkElement.appendTo('head');