Add css files using jquery

Question

I have html page and I want to change page styles using color switcher. I try to add css files to page by click on color-list div.

files hierarchy

index.html

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

js(folder)
-my.js

My html

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

Also I try to use 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' />"));
});

But it doesn't work. I can't add css files to head

Possible duplicate of [Load external css file like scripts in jquery which is compatible in ie also](http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also) — Developer, Jan 12 '17 at 10:54

score 0 · Answer 1 · answered Jan 12 '17 at 10:58

0

The reference to the file must start from your html and so you must use colors-css/style2.css instead of ../colors-css/style2.css:

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

answered Jan 12 '17 at 10:58

RWAM

6,760
3
32
45

score 0 · Answer 2 · answered Jan 12 '17 at 11:02

0

Try this..

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

answered Jan 12 '17 at 11:02

Hardik Kalathiya

2,221
1
18
28

score 0 · Answer 3 · answered Jan 12 '17 at 11:11

You can add default link tag and on jquery click event set respective href

HTML Markup:

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

jQuery Code:

$(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");
    });

});

score 0 · Answer 4 · answered Jan 12 '17 at 11:11

You can solve your problem by two way

1) - Create a CSS class in your CSS file with a class

.list-style{
   backbround : red;
}

In your jQuery write following:

$('.color-list .first').addClass('list-style');

2) - user the below query

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

score 0 · Accepted Answer · answered Jan 12 '17 at 12:03

Try this hope it will help you.

$(document).on("click",".color-list div",function(){

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

});

Please find the below screenshot

http://prntscr.com/dunw7l

Add css files using jquery

5 Answers5