Reputation: 4296
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
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
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
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
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