How to load CSS using jquery

Question

I have loaded a css file on server so I am having a URL with me. How can i load it in my perl code using JQuery ?

So currently I am hardcoding the css in my mason page which is missing from the page something like this

JQ.onReady('show', function(){
    JQ.addStyles({styles: ["\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid   #2F2F1D;background-color:#EFEDD4;padding:3px; }  .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; }  .ap_classic .ap_close { float:right; }  .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } "]});
});

I want to avoid hardcoding this css ?

Why does is have to be jQuery? Why not just output a `link rel=` into the head? — Pekka, Oct 12 '10 at 09:50
Not sure what you mean by load it in your perl code, do you want to modify the file? Or simply just display it on the page? If it's the latter, I would try and load it from perl/html. — Marko, Oct 12 '10 at 09:50
possible duplicate of [Load external stylesheets on request?](http://stackoverflow.com/questions/2126238/load-external-stylesheets-on-request) — Pekka, Oct 12 '10 at 09:51

score 85 · Accepted Answer · answered Oct 12 '10 at 09:58

85

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') );

answered Oct 12 '10 at 09:58

pawel

35,827
7
56
53

I am having a mason page. So its not a html page where i can set headers. – TopCoder Oct 12 '10 at 09:59
Was trying same... But IE version 8 does not load the CSS loaded using this method. – Rohan210 Jun 20 '12 at 12:10
6

document.createStyleSheet('style.css'); IE FIX – Rohan210 Jun 20 '12 at 12:35
Well if you are packaging a .js file for public use, you want to make setup simple and not burden the user to put a link in the head HTML – Vinnie Amir Jun 15 '22 at 03:44

score 46 · Answer 2 · edited May 23 '17 at 12:00

46

Again, as per Dynamically loading css stylesheet doesn't work on IE.

You need to set the href attr last and only after the link elem is appended to the head:

$('<link>')
  .appendTo('head')
  .attr({
      type: 'text/css', 
      rel: 'stylesheet',
      href: '/css/your_css_file.css'
  });

edited May 23 '17 at 12:00

Community

1
1

answered Aug 15 '13 at 07:49

ekerner

5,650
1
37
31

Doh, of course it would! I must have been a asleep when I coded that. Great amendment Sergey :) – ekerner Feb 05 '14 at 00:21

score 1 · Answer 3 · answered Mar 22 '19 at 13:16

I like being consistent about language and file type (ex: don't mix css with html). So I would go for creating a style.css file and loading it into a tag with jQuery.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <style id="import"></style>
        <h2 class="red">this is red</h2>
    </div>
    <script type="text/javascript">
        $( document ).ready(function() {
            $( "#import" ).load( "./style.css" );
        });
    </script>
</body>
</html>

style.css

.red{
    color: red;
}

score 0 · Answer 4 · answered Mar 22 '19 at 10:55

0

$(document).ready(function(){
    console.log("ready!");
var e=$("<link>",{
    rel:"stylesheet",
    type:"text/css",
    href:"/your/css/file.css"})[0];
e.onload=function(){
console.log("CSS IN IFRAME LOADED")},
document.getElementsByTagName("head")[0].
appendChild(e)});

answered Mar 22 '19 at 10:55

EMW

21
6

I think it's generally recommended to not just paste blocks of code but include an explanation to your answer. – qozle Aug 26 '22 at 14:25

How to load CSS using jquery

4 Answers4

Linked