Adding CSS File With Jquery

adding css file with jquery

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

This should work.

Add css files using jquery

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

Jquery - Adding and removing stylesheet on click

You don't have to remove a stylesheet completely from DOM: just disable it. It's easy to do, actually, but there are two things to be aware of:

$(function() {
  var linkEl;
  $(".css_switch").click(function() {
    if (!linkEl) {
      linkEl = $('<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />')
                .appendTo('head')[0];
    }
    else if (linkEl.sheet) {
      linkEl.sheet.disabled = !linkEl.sheet.disabled;
    }
  });
});

Demo. Each style link element has associated StyleSheet object, which can be disabled with, quite unsurprisingly, disabled property. But there's a caveat: the aforementioned object is created only when the external CSS document is loaded and parsed. Until this, linkEl.sheet is null; hence the check.

Note that simpler version:

else { linkEl.disabled = !linkEl.disabled; }

... works too (you change property of corresponding HTMLLinkElement, disabling it instead), but there's a subtle bug: this property can be changed even when the resource is not ready. So imagine a user clicking on the button, seeing no changes afterwards (CSS isn't loaded yet). Now they click the button again, this time disabling the link - and when the resource is there, it's not shown. A user is dazed and confused, and that's usually not good.

With the quoted version, disabling is done only when a user sees the result of CSS change.

How to load CSS using jquery

I don't get why you can not just insert the <link/> element in the <head/> section, but here's a jQuery snippet:

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

jQuery: adding additional CSS files to current page

Append it to your head:

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");

Load external css file like scripts in jquery which is compatible in ie also

In jQuery 1.4:

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

http://api.jquery.com/jQuery/#jQuery2

How do I switch my CSS stylesheet using jQuery?

$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

Give this a try but not sure if it will work I have not tested it but gd luck.

Append css file by jquery but css file not working

You're missing the rel attribute from the link attribute. Also note that type is not needed. Try this:

var u = document.createElement("link");
u.rel = "stylesheet";
u.href = "https://myurl/OwlCarousel/dist/assets/owl.carousel.css";
$("#lookbookslider-2").append(u);

However it's worth noting that this can be simplified if you use jQuery to create the <link /> element, and also you should append the new stylesheet reference in to the head:

var $link = $('<link />', {
  rel: 'stylesheet',
  href: 'https://myurl/OwlCarousel/dist/assets/owl.carousel.css'
}).appendTo('head');

Finally, note that appending stylesheets at runtime is a little bit of an anti-pattern. If you're trying to make the page more efficient, I'd suggest using bundling and minification of your CSS and JS, and then include all required references through HTML on page load.

---

Related Topics