CODEWITHSUNDEEP
jqueryhtmlcssstylesheet
TopCoder
TopCoder

Reputation: 4296

How to load CSS using jquery

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 ?

Upvotes: 61

Views: 106432

Answers (4)

Tudor Morar
Tudor Morar

Reputation: 3866

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;
}

Upvotes: 2

EMW
EMW

Reputation: 21

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

Upvotes: 0

ekerner
ekerner

Reputation: 5848

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

Upvotes: 48

pawel
pawel

Reputation: 37005

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

Upvotes: 87

Related Questions