使用jquery添加css文件

Question

我有html页面，我想改变页面样式使用颜色开关。我试图通过点击彩色列表div将css文件添加到页面中。

文件层次结构

index.html

css(folder)
-style2.css
-style3.css

js(folder)
-my.js

我的html

<div class="settings-section color-list">
    <div class="first"></div>
    <div class="second"></div>  
</div>

此外，我还尝试使用jQuery

$('.color-list .first').on('click', function(){
    $("head").append($("<link rel='stylesheet' href='../colors-css/style2.css' type='text/css' media='screen' />"));
});

$('.color-list .second').on('click', function(){
    $("head").append($("<link rel='stylesheet' href='../colors-css/style3.css' type='text/css' media='screen' />"));
});

但不起作用。我不能将css文件添加到头

Answer 1

试一试，希望它能帮助你。

$(document).on("click"，“..color list div”)，function(){

var currentCssUrl=$(this).attr('id');
$.ajax({
url : currentCssUrl,
success : function(data){        
$("<style></style>").appendTo("head").html(data); 
}
});

})；

请找到下面的截图

http://prntscr.com/dunw7l

Answer 2

对文件的引用必须从html开始，因此必须使用colors-css/style2.css而不是../colors-css/style2.css。

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

Answer 3

试试这个.

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/style1.css"
}).appendTo("head");