使用jquery添加css文件

我有html頁面，我想使用顏色切換器更改頁面樣式。我嘗試通過點擊color-list div來添加css文件到頁面。使用jquery添加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文件頭

來源

2017-01-12 Pravayest Pravayest

的[加載像jQuery的腳本，在IE瀏覽器兼容的外部CSS文件（也）可能的複製（http://stackoverflow.com/questions/2685614/load -external-CSS的類文件的腳本功能於jQuery的它，是兼容的，在-IE-也） – Developer

試試這個，希望它會幫助你。

的$（document）。在（「點擊」，函數（）{

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

} 「顏色列表格。」）;

請找到下面的截圖

http://prntscr.com/dunw7l

來源

2017-01-12 12:03:38

該文件的引用必須從你的HTML開始，所以你必須使用colors-css/style2.css代替../colors-css/style2.css：

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

來源

2017-01-12 10:58:58 RWAM

試試這個..

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

來源

2017-01-12 11:02:16

您可以添加默認鏈接標籤和jQuery的點擊事件集分別href

HTML標記：

<link id="dynamicCSS" rel='stylesheet' href='#' type='text/css' media='screen' />

jQuery代碼：

$(document).ready(function(){ 

    var dynCSSk= $("#dynamicCSS"); 

    $('.color-list .first').on('click', function(){ 
     dynCSSk.attr("href","colors-css/style2.css"); 
    }); 

    $('.color-list .second').on('click', function(){ 
     dynCSSk.attr("href","colors-css/style3.css"); 
    }); 

});

來源

2017-01-12 11:11:05

您可以通過兩種方式

1）解決您的問題 - 一個類來創建你的CSS文件中的CSS類

.list-style{ 
    backbround : red; 
}

在你的jQuery中寫入以下內容：

$（'。color-list .first'）.addClass（'list-style'）;

2） - 用戶以下查詢

$('.color-list .first').css('background','green');

來源

2017-01-12 11:11:24

使用jquery添加css文件

回答

相關問題