How to load CSS using jquery
JqueryHtmlCssStylesheetJquery Problem Overview
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 ?
Jquery Solutions
Solution 1 - 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') );
Solution 2 - Jquery
Again, as per https://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-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'
});
Solution 3 - Jquery
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;
}
Solution 4 - Jquery
$(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)});