How to load CSS using jquery


Tags: jquery,html,css,stylesheet

Problem :

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 ?



Solution :

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

    CSS Howto..

    How to rotate the text Rotation with center to the Number

    CSS: How to position a div in the center with dynamic width

    How to set min-height using css [closed]

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to write this CSS-Selector (Target img from previous Anchor-Tag)

    How to change the opacity background color of other two buttons once we click on a single button using css

    Show div on radio button check using JS fallback

    How to make dropdown list unselectable?

    How to implement block style for list

    How can I clip and transform an image, adding rounded corners and perspective?

    How can i concatenate the following css string in php without creating another variable or breaking the string?

    How to make JQuery + CSS Verticle Tabs

    css how to select a class in another div

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How to override default CSS in cakePHP 1.3?

    How to style differently only the first list item from unsorted list

    How to override Liferay core' css?

    How to apply css on checkbox when it's getting disabled?

    How to make a simple plus one voting system in code igniter

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How to vertically and horizontally center two images inside a div on a responsive page

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How to center CSS-shapes within a wrapper in a row

    How do I join my list and div using css?

    How can I prevent a flex container from overflowing/underflowing?

    css: how to build centered div with minimum spacing on the left

    JavaScript CSS how to add and remove multiple CSS classes to an element

    How to remove the double border bottom line below the breadcrumb

    How to position two divs horizontally within another div

    How to define margin (CSS) around an absolutely positioned, floating element?