I need to check (in Javascript) if a CSS file is loaded and if not then to load it. jQuery is fine.
Just check to see if a <link> element exists with the href attribute set to your CSS file's URL:
if (!$("link[href='/path/to.css']").length)
$('<link href="/path/to.css" rel="stylesheet">').appendTo("head");
The plain ol' JS method is simple too, using the document.styleSheets collection:
function loadCSSIfNotAlreadyLoadedForSomeReason () {
var ss = document.styleSheets;
for (var i = 0, max = ss.length; i < max; i++) {
if (ss[i].href == "/path/to.css")
return;
}
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/path/to.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSSIfNotAlreadyLoadedForSomeReason();
I just had to write something like that and I wanted to share it. This one is prepared for multiple cases.
If there is no request for the css file (css file isn't linked ...)
If there is a request for the css file, but if it failed (css file is no longer available ...)
var styles = document.styleSheets;
for (var i = 0; i < styles.length; i++) {
// checking if there is a request for template.css
if (styles[i].href.match("template")) {
console.log("(Iteration: " + i + ") Request for template.css is found.");
// checking if the request is not successful
// when it is successful .cssRules property is set to null
if (styles[i].cssRules != null && styles[i].cssRules.length == 0) {
console.log("(Iteration: " + i + ") Request for template.css failed.");
// fallback, make your modification
// since the request failed, we don't need to iterate through other stylesheets
break;
} else {
console.log("(Iteration: " + i + ") Request for template.css is successful.");
// template.css is loaded successfully, we don't need to iterate through other stylesheets
break;
}
}
// if there isn't a request, we fallback
// but we need to fallback when the iteration is done
// because we don't want to apply the fallback each iteration
// it's not like our css file is the first css to be loaded
else if (i == styles.length-1) {
console.log("(Iteration: " + i + ") There is no request for template.css.");
// fallback, make your modification
}
}
TL;DR version
var styles = document.styleSheets;
for (var i = 0; i < styles.length; i++) {
if (styles[i].href.match("css-file-name-here")) {
if (styles[i].cssRules != null && styles[i].cssRules.length == 0) {
// request for css file failed, make modification
break;
}
} else if (i == styles.length-1) {
// there is no request for the css file, make modification
}
}
Update: Since my answer got a few upvotes and this led me to revise the code, I decided to update it.
// document.styleSheets holds the style sheets from LINK and STYLE elements
for (var i = 0; i < document.styleSheets.length; i++) {
// Checking if there is a request for the css file
// We iterate the style sheets with href attribute that are created from LINK elements
// STYLE elements don't have href attribute, so we ignore them
// We also check if the href contains the css file name
if (document.styleSheets[i].href && document.styleSheets[i].href.match("/template.css")) {
console.log("There is a request for the css file.");
// Checking if the request is unsuccessful
// There is a request for the css file, but is it loaded?
// If it is, the length of styleSheets.cssRules should be greater than 0
// styleSheets.cssRules contains all of the rules in the css file
// E.g. b { color: red; } that's a rule
if (document.styleSheets[i].cssRules.length == 0) {
// There is no rule in styleSheets.cssRules, this suggests two things
// Either the browser couldn't load the css file, that the request failed
// or the css file is empty. Browser might have loaded the css file,
// but if it's empty, .cssRules will be empty. I couldn't find a way to
// detect if the request for the css file failed or if the css file is empty
console.log("Request for the css file failed.");
// There is a request for the css file, but it failed. Fallback
// We don't need to check other sheets, so we break;
break;
} else {
// If styleSheets.cssRules.length is not 0 (>0), this means
// rules from css file is loaded and the request is successful
console.log("Request for the css file is successful.");
break;
}
}
// If there isn't a request for the css file, we fallback
// But only when the iteration is done
// Because we don't want to apply the fallback at each iteration
else if (i == document.styleSheets.length - 1) {
// Fallback
console.log("There is no request for the css file.");
}
}
TL;DR
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].href && document.styleSheets[i].href.match("/template.css")) {
if (document.styleSheets[i].cssRules.length == 0) {
// Fallback. There is a request for the css file, but it failed.
break;
}
} else if (i == document.styleSheets.length - 1) {
// Fallback. There is no request for the css file.
}
}
Something like this will do (using jQuery):
function checkStyleSheet(url){
var found = false;
for(var i = 0; i < document.styleSheets.length; i++){
if(document.styleSheets[i].href==url){
found=true;
break;
}
}
if(!found){
$('head').append(
$('<link rel="stylesheet" type="text/css" href="' + url + '" />')
);
}
}
Peer to the comment made by JFK about the accepted answer:
I understood the question as "how to check whether a css file is
loaded or not" rather than "how to check if the element
exists".
The element may exist (and the path may be correct too) but it
doesn't mean that the css file was successful loaded.
If you access a link Element via getElementById you'll not be able to check/read the style defined inside the CSS file.
In order to check if a style has been successfully loaded we have to use getComputedStyle (or currentStyle for IE).
HTML
//somewhere in your html document
<div id="css_anchor"></div>
CSS
//somewhere in your main stylesheet
#css_anchor{display:none;}
JAVASCRIPT
//js function to check the computed value of a style element
function get_computed_style(id, name){
var element = document.getElementById(id);
return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}
//on document ready check if #css_anchor has been loaded
$(document).ready( function() {
if(get_computed_style('css_anchor', 'display')!='none'){
//if #css_anchor style doesn't exist append an alternate stylesheet
var alternateCssUrl = 'http://example.com/my_alternate_stylesheet.css';
var stylesheet = document.createElement('link');
stylesheet.href = alternateCssUrl;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
});
Part of the answer comes from: myDiv.style.display returns blank when set in master stylesheet
Demo here: http://jsfiddle.net/R9F7R/
Apart from all the nice answers above, you can simply put a dummy element inside your markup and in your css file, give it any style other than default. Then in the code check if the attribute is applied to the dummy element, and if not, load the css. Just a thought though, not a neat way to do that thing you want done.
My 2 cents. This checks whether there are any rules set on the css or not, meaning that it was or not successfully loaded
if(jQuery("link[href='/style.css']").prop('sheet').cssRules.length == 0){
//Load the css you want
}
The document object contains a stylesheet collection with all the loaded stylesheets.
For a reference see http://www.javascriptkit.com/domref/stylesheet.shtml
You can loop this collection to verify that the stylesheet you want to verify is in it and thus loaded by the browser.
document.styleSheets[0] //access the first external style sheet on the page
There are some browser incompatibilities you should look out for though.
One way: use document.getElementsByTagName("link") iterate over each and check if its href is equal to the CSS file you check.
Another way: if you know some CSS rule being set only in that file, check if this rule really apply e.g. check if background of something is really red.
You can either check if the filename is within your markup, like:
var lnks = document.getElementsByTagName('link'),
loadcss = true;
for(var link in lnks) {
href = link.getAttribute('href');
if( href.indexOf('foooobar.css') > -1) ){
loadcss = false;
return false;
}
});
if( loadcss ) {
var lnk = document.createElement('link'),
head = document.getElementsByTagName('head')[0] || document.documentElement;
lnk.rel = 'stylesheet';
lnk.type = 'text/css';
lnk.href = '//' + location.host + 'foooobar.css';
head.insertBefore(lnk, head.firstChild);
}
or you could check for a specific className which should be available, if the stylesheet was loaded. This probably comes a little closer to a feature detection.
var links = document.getElementsByTagName('link');
var file = 'my/file.css';
var found = false;
for ( var i in links )
{
if ( links[i].type == 'text/css' && file == links[i].href ) {
found = true; break;
}
}
if ( !( found ) ) {
var styles = document.getElementsByTagName('style');
var regexp = new RegExp('/\#import url\("?' + file + '"?\);/');
for ( var i in styles )
{
if ( styles[i].src == file ) {
found = true; break;
} else if ( styles[i].innerHTML.match(regexp) ) {
found = true; break;
}
}
}
if ( !( found ) ) {
var elm = document.createElement('link');
elm.href = file;
document.documentElement.appendChild(elm);
}
For a nice consistent and repeatable experience, I've written these two jQuery plugins that mimic the $.getScript(url, callback) jQuery method (however they will NOT force reloading from the server like $.getScript(). There are two methods: one that will load a CSS file anytime it's called, and one that will only load it once. I find the former handy during development when I'm making changes, and the latter great for a speedy deployment.
/**
* An AJAX method to asynchronously load a CACHED CSS resource
* Note: This removes the jQuery default behaviour of forcing a refresh by means
* of appending a datestamp to the request URL. Actual caching WILL be subject to
* server/browser policies
*/
$.getCachedCss = function getCachedCss(url, callback)
{
$('<link>',{rel:'stylesheet', type:'text/css', 'href':url, media:'screen'}).appendTo('head');
if (typeof callback == 'function')
callback();
}
/**
* An AJAX method to asynchronously load a CACHED CSS resource Only ONCE.
* Note: This removes the jQuery default behaviour of forcing a refresh by means
* of appending a datestamp to the request URL. Actual caching WILL be subject to
* server/browser policies
*/
$.getCachedCssOnce = function getCachedCssOnce(url, callback)
{
if (!$("link[href='" + url + "']").length) {
$.getCachedCss(url, callback);
if (typeof callback == 'function')
callback();
}
}
Usage example:
$(function() {
$.getCachedCssOnce("pathToMyCss/main.css");
)}
Usage example with callback:
$(function() {
$.getCachedCssOnce("pathToMyCss/main.css", function() {
// Do something once the CSS is loaded
});
use .sheet in jQuery:
HTML:
<link rel="stylesheet" href="custom.css">
jQuery:
if($("link[href='custom.css']")[0].sheet.cssRules.length==0){
//custom.css was not loaded, do your backup loading here
}
simple way using javascript..,
loadCssIfNotLoaded('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
loadCssIfNotLoaded('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
function loadCssIfNotLoaded(url) {
var element=document.querySelectorAll('link[href="' + url + '"]');
if (element.length == 0)
{
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
}
In one line, with jQuery.
If the #witness div is visible, we have to load the css file.
In the HTML, we have a:
<div id="witness"></div>
In the CSS file to load, we have:
#witness{display:none;}
So, if the css file is loaded, the #witness div is not visible. We can check with jQuery and make decision.
!$('#witness').is(':visible') || loadCss() ;
As a snippet:
function loadCss(){
//...
console.log('Css file required');
};
!$('#witness').is(':visible') || loadCss();
#witness{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="witness"></div>
Related
I have created a google chrome extension to replace certain images from third party websites. I have implement all the programming part but one of my requirements states that
On a slower net connection the original images should not be visible
until it’s replaced by the new images
I am not sure wether it is achievable or not. I want to know what sort of event I should attach here. Can experts give their input on this?
This is the work I have done.
// get current websites base url
var current_website = window.location.href;
//run the code on specific pages
if ($.inArray(current_website, config.target_websites) != -1) {
config.image_config.forEach(function (obj) {
var src = obj.src;
var target = obj.target;
/**find all the occurances in the <img> tag */
var key = 'img[src*="' + src + '"]';
var img = $(key);
/**replace it with the target image*/
img.attr('src', target);
/** check the inline CSS*/
$("[style*=background-image]").css('background-image', function (i, oldimg) {
return oldimg.indexOf(src) == -1 ? oldimg : 'url(' + target + ')';
});
/***check all the external styles for the image*/
$('*').each(function () {
if ($(this).css('background-image').indexOf(src) != -1) {
$(this).css('background-image', 'url(' + target + ')');
}
});
});
}
Since you're already using jQuery, if you're not opposed to a small library (7.25 KB), you can use the jQuery plugin imagesloaded.
Basic usage:
// options
$('#container').imagesLoaded( {
// options...
},
function() {
// your code to run after load
}
);
Then you could do a simple $('img').hide() on load, and $('img').show() after all images have loaded on your particular images.
You can see in the demo that it works for images which have been inserted dynamically into the page as well, which would meet your requirement for that the images of your key be hidden until replaced.
http://imagesloaded.desandro.com/
I am checking document.styleSheets for finding whether the file is loaded or not. I am doing,
for (var i = 0, iLen = document.styleSheets.length; i < iLen; i++) {
var sheet = document.styleSheets[i];
if (!sheet.href) {
continue;
}
if (sheet.href.indexOf('mypath') > -1 && sheet.rules.length > 0) {
// do something
}
}
But its not working. Is there a way?
I tried your code ant it works for me, ( on chrome, with internal css ), but it fails when using external css loaded from CDN's, so i would guess your problem is "rules" property as mentioned by #PatrickEvans.
If you don't find any other good way, then you may add an element to the page that doesn't affect the page display, but can be checked for a change.
e.g add a specific css rule like this.
html body div#my_stylesheet_name {
width: 112px !important;//random width that is unlikely overwritten by another css
}
<div id="my_stylesheet_name" style="height:0; width: 0;display: none;"></div>
//then use javascript timer/interval to check if
element with id of "my_stylesheet_name" has width of 112, if so, then it means css has loaded.
Edit - If you dont have any other option, you may consider something like this ( i havent used it myself before so test browser compatibility before using it )
1) create the element using JS
2) add on error and onload events, and use those to do your magic
var link;
link = document.createElement("link");
link.setAttribute("type", "text/css");
link.onload=function( evt ) {
console.log("LINK LOADED", evt );
};
link.onerror=function( evt ) {
console.log("LINK Error", evt );
};
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
document.getElementsByTagName("head")[0].appendChild(link);
How can I get the path of the current script in javascript using jQuery
for example I have site.com/js/script.js and there is a code in this script:
$(document).ready(function() {
alert( ... this code ... );
}
It Should return alert box with the "/js/script.js" message. This function should work like magic __FILE__ constant in php
So, why do I need this?
I want to set background image dynamically:
$("somediv").css("background-image", "url(" + $SCRIPT_PATH + "/images/img.png)");
and images directory is the /js directory, near the script.js file
and js folder's name can be dynamically set, so script and images can be in the /myprogect/javascript-files directory
You can rely on the fact that each <script> element has to be evaluated* before the next one is inserted into the DOM.
This means that the script currently evaluated (as long as it is part of your markup and not dynamically inserted) will be the last one in the NodeList retrieved with getElementsByTagName( 'script' ).
This allows you to read that elements src attribute and from that determine the folder that the script is being served from - like this:
var scriptEls = document.getElementsByTagName( 'script' );
var thisScriptEl = scriptEls[scriptEls.length - 1];
var scriptPath = thisScriptEl.src;
var scriptFolder = scriptPath.substr(0, scriptPath.lastIndexOf( '/' )+1 );
console.log( [scriptPath, scriptFolder] );
I tried this technique with 3 scripts loaded from different folders and get this output
/*
["http://127.0.0.1:8000/dfhdfh/folder1/script1.js", "http://127.0.0.1:8000/dfhdfh/folder1/"]
["http://127.0.0.1:8000/dfhdfh/folder2/script2.js", "http://127.0.0.1:8000/dfhdfh/folder2/"]
["http://127.0.0.1:8000/dfhdfh/folder3/script3.js", "http://127.0.0.1:8000/dfhdfh/folder3/"]
*/
* from John Resigs blog linked to above
This means that when the script finally executes that it'll be the
last script in the DOM - and even the last element in the DOM (the
rest of the DOM is built incrementally as it hits more script tags, or
until the end of the document).
Update
As pimvdb points out - this will work as the script is being evaluated. You will need to store the path somehow if you are going to use it later. You can't query the DOM at a later point. If you use the same snippet for each script the value of scriptFolder will be overwritten for each script. You should give each script a unique variable perhaps?
Wrapping your script in its own scope closes over the value of scriptFolder making it available to the rest of the script without fear of being overwritten
(function() {
var scriptEls = document.getElementsByTagName( 'script' );
var thisScriptEl = scriptEls[scriptEls.length - 1];
var scriptPath = thisScriptEl.src;
var scriptFolder = scriptPath.substr(0, scriptPath.lastIndexOf( '/' )+1 );
$( function(){
$('#my-div').click(function(e){
alert(scriptFolder);
});
});
})();
Add the following code to your JS :
var retrieveURL = function(filename) {
var scripts = document.getElementsByTagName('script');
if (scripts && scripts.length > 0) {
for (var i in scripts) {
if (scripts[i].src && scripts[i].src.match(new RegExp(filename+'\\.js$'))) {
return scripts[i].src.replace(new RegExp('(.*)'+filename+'\\.js$'), '$1');
}
}
}
};
Suppose these are the scripts called in your HTML :
<script src="assets/js/awesome.js"></script>
<script src="assets/js/oldcode/fancy-stuff.js"></script>
<script src="assets/js/jquery/cool-plugin.js"></script>
Then, you can use the function like this
var awesomeURL = retrieveURL('awesome');
// result : 'assets/js/'
var awesomeURL = retrieveURL('fancy-stuff');
// result : 'assets/js/oldcode/'
var awesomeURL = retrieveURL('cool-plugin');
// result : 'assets/js/jquery/'
Note that this only works when there are no two script files in your HTML with the same name. If you have two scripts with the same name that are located in a different folder, the result will be unreliable.
Note
If you dynamically add scripts to your page, you need to make sure your code is executed after the last script has been added to the DOM.
The follow example shows how to do this with one dynamically loaded script. It outputs a JSON array with the src link for scripts that load an external js file and a base64-encoded string of the JS content for inline scripts:
var addScript = function(src, callback) {
var s = document.createElement( 'script' );
s.setAttribute( 'src', src );
document.body.appendChild( s );
s.onload = callback;
}
var retrieveURL = function(filename) {
var scripts = document.getElementsByTagName('script');
if (scripts && scripts.length > 0) {
for (var i in scripts) {
if (scripts[i].src && scripts[i].src.match(new RegExp(filename+'\\.js$'))) {
return scripts[i].src.replace(new RegExp('(.*)'+filename+'\\.js$'), '$1');
}
}
}
};
addScript('https://code.jquery.com/jquery-1.12.4.min.js', function() {
var scripts = document.getElementsByTagName('script');
var sources = [];
for (var i = 0; i < scripts.length; i++) {
if(scripts[i].src == '') {
sources.push(btoa(scripts[i].innerHTML));
} else {
sources.push(scripts[i].src);
}
}
document.body.innerHTML += '<pre>' + JSON.stringify(sources,null,2) + '</pre>';
});
See also this Fiddle.
I don't think jQuery provide such a functionality.
Anyway you can get currentc script path path (both fully http and relative) by reading the answer here: What is my script src URL?
Can't you set a kind of path variable in the js? So, you save the path of the file in the file itself.
For example:
$(function() {
var FilePath = "js/some/path";
setMyDynamicImageUsingPath(FilePath);
});
// ...
function setMyDynamicImageUsingPath(path) {
$("somediv").css("background-image", "url(" + path + "/images/img.png)");
}
I have a function doing the following using javascript:
Create link element and set href=cssFile.
Insert the link element in head tag.
Create a div element.
Set the class name using setAttribute
appendChild the div on body.
Now getting CSS rule value using document.defaultView.getComputedStyle(divElement, null)[cssRule].
Now getComputedStyle is returning the default values, and if I wait on breakpoint using Firebug before getComputedStyle call, then it returns the CSS rule from the CSS injected.
Regards,
Munim
You can create the dynamic css url and fetch the css as plain text using a normal ajax call.
Then use this to load the css:
function loadCss(cssText, callback){
var style = document.createElement('style');
style.type='text/css';
if(callBack != undefined){
style.onload = function(){
callBack();
};
}
style.innerHTML = cssText;
head.appendChild(style);
}
And use it like this:
loadCss(ajaxResponseText, function(){
console.log("yaay css loaded, now i can access css defs");
})
This is actually what I did.
To ensure a specific CSS file is loaded, I added a style in the end of the CSS file. For example:
#ensure-cssload-8473649 {
display: none
}
Now I have a JavaScript function which will fire the callback specified when the above style is loaded on the page:
var onCssLoad = function (options, callback) {
var body = $("body");
var div = document.createElement(constants.TAG_DIV);
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (key.toLowerCase() === "css") {
continue;
}
div[key] = options[key];
}
}
var css = options.css;
if (css) {
body.appendChild(div);
var handle = -1;
handle = window.setInterval(function () {
var match = true;
for (var key in css) {
if (css.hasOwnProperty(key)) {
match = match && utils.getStyle(div, key) === css[key];
}
}
if (match === true) {
window.clearTimeout(handle);
body.removeChild(div);
callback();
}
}, 100);
}
}
And this is how I used the function above:
onCssLoad({
"id": "ensure-cssload-8473649",
css: {
display: "none"
}
}, function () {
// code when you want to execute
// after your CSS file is loaded
});
Here the 1st parameter takes the options where id is to check against the test style and css property to verify against what loaded from the CSS.
I assume you are doing this because you need to dynamically create the URL of the stylesheet.
Couple options come to mind:
1) Create the URL server-side and avoid this problem altogether.
2) Use a setTimeout to check whether or not the style has been loaded and check every 20ms or so until getComputedStyle returns the value you want.
I don't like #2 at all...but it's an option. If you use #2 make sure to clear the timeout even if there is an exception.
Here is a solution that seems to work across all browsers.
function loadCss(fileUrl) {
// check for css file type
if (fileUrl.indexOf(".css")==fileUrl.length-4) {
// Create link element
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", fileUrl);
if (typeof fileref!="undefined") {
// remove the . if this is a relative link
if(fileUrl.indexOf('.')==0) {
fileUrl = fileUrl.substr(1);
}
// generate the full URL to use as the fileId
var pathname = window.location.pathname;
var pathUrl = pathname.substr(0,pathname.lastIndexOf("/"));
var fileId = window.location.protocol + "//" + window.location.host + pathUrl + fileUrl;
// append the newly created link tag to the head of the document
document.getElementsByTagName("head")[0].appendChild(fileref);
// begin checking for completion (100ms intervals up to 2000ms)
this.checkCSSLoaded(fileId,100,0,2000);
} else throw 'INVALID_CSS_ERROR';
} else throw 'INVALID_CSS_ERROR';
}
function checkCSSLoaded(cssHref,milliPerCheck,milliPerCount,milliTimeout) {
// Look through all sheets and try to find the cssHref
var atSheet = -1;
var sheetLength = document.styleSheets.length;
while(++atSheet < sheetLength ) {
if(cssHref == document.styleSheets[atSheet].href) {
// If found dispatch and event or call a procedure
/* Do whatever is next in your code here */
return;
}
}
// check for timeout
if(milliCount > milliTimeout) {
alert('INVALID_CSS_ERROR::'+" ("+cssHref+"+ not found!");
/* Do whatever happens if timeout is reached here */
return;
}
// else keep trying
setTimeout(checkCSSLoaded ,milliPerCheck, cssHref, milliPerCheck, milliCount+millPerCheck, milliTimeout);
}
Essentially we
Create a link tag.
Set its attributes so it knows its a stylesheet link tag
Create a file id in such a way that it will always be the full file URL
Append the link tag to the head of the document head
Perform consecutive tests to see if (stylesheet.href == fileID) comes into existence
If found do something else if timeout do something else keep checking
Using document.styleSheets to check if a css is loaded is wrong, since as soon as a css link is being added to the DOM, it will be available from document.styleSheets, even if it is not loaded yet.
Adding a marker to CSS is hacky too.
The correct solution is to listen to the onload event :
var loadedCss = {};
cssHref = "http://www.foo.com/bar.css";
css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", cssHref);
css.onload = function(){
loadedCss[cssHref] = true;
}
document.getElementsByTagName("head")[0].appendChild(css);
function isCssLoaded(url) {
return loadCss[url];
}
How can I do this?
I tried
$('link[title="mystyle"]').remove();
and although the element is removed, the styles are still applied to the current page (in both Opera and Firefox).
Is there any other way?
To cater for ie you have to set the stylesheet to be disabled as it keeps the css styles in memory so removing the element will not work, it can also cause it to crash in some instances if I remember correctly.
This also works for cross browser.
e.g
document.styleSheets[0].disabled = true;
//so in your case using jquery try
$('link[title=mystyle]')[0].disabled=true;
I managed to do it with:
$('link[title="mystyle"]').attr('disabled', 'disabled');
it seems this is the only way to remove the styles from memory.
then I added:
$('link[title="mystyle"]').remove();
to remove the element too.
To disable your selected stylesheet:
$('link[title="mystyle"]').prop('disabled', true);
If you never want that stylesheet to be applied again, you can then .remove() it. But don’t do that if you want to be able to re-enable it later.
To re-enable the stylesheet, do this (as long as you didn’t remove the stylesheet’s element):
$('link[title="mystyle"]').prop('disabled', false);
In the code above, it is important to use .prop, not .attr. If you use .attr, the code will work in some browsers, but not Firefox. This is because, according to MDN, disabled is a property of the HTMLLinkElement DOM object, but not an attribute of the link HTML element. Using disabled as an HTML attribute is nonstandard.
no jQuery solution
if you can add id to your link tag
<link rel="stylesheet" href="css/animations.css" id="styles-animations">
document.getElementById("styles-animations").disabled = true;
if you know index position of your css file in document
document.styleSheets[0].disabled = true; // first
document.styleSheets[document.styleSheets.length - 1].disabled = true; // last
if you want to disable style by name you can use this function
/**
* #param [string] [styleName] [filename with suffix e.g. "style.css"]
* #param [boolean] [disabled] [true disables style]
*/
var disableStyle = function(styleName, disabled) {
var styles = document.styleSheets;
var href = "";
for (var i = 0; i < styles.length; i++) {
href = styles[i].href.split("/");
href = href[href.length - 1];
if (href === styleName) {
styles[i].disabled = disabled;
break;
}
}
};
note: make sure style file name is unique so you don't have "dir1/style.css" and "dir2/style.css". In that case it would disable only first style.
Using pure javascript:
var stylesheet = document.getElementById('stylesheetID');
stylesheet.parentNode.removeChild(stylesheet);
To remove a stylesheet:
$('link[src="<path>"]').remove();
To Replace a stylesheet:
$('link[src="<path>"]').attr('src','<NEW_FILE_PATH>');
If you want to do it only with the href attribute:
$('link[href="https://example.com/mycss.css"]').remove()
ES6 solution:
const disableStyle = styleName => {
const styles = document.styleSheets;
let href = "";
for (let i = 0; i < styles.length; i++) {
if (!styles[i].href) {
continue;
}
href = styles[i].href.split("/");
href = href[href.length - 1];
if (href === styleName) {
styles[i].disabled = true;
break;
}
}
};
Use it like disableStyle("MyUnwantedFile.css");.
Here's both an add & remove using the disabling principle mentioned in a number of these other posts to prevent cross browser issues. Note how my add checks to see if the sheet already exists, in which case it just enables it. Also, in contrast to some answers, this is designed to work using the url to a .css file as the sole argument to the functions (insulating the client from the use of id or title attributes).
function element( id ){ return document.getElementById( id ); }
function addStyleSheet( url ){
var id = _styleSheetUrlToId( url );
if( !_enableStyleSheet( id ) ) {
var link = document.createElement("link");
link.href = url;
link.type = "text/css";
link.rel = "stylesheet";
link.id = id;
document.getElementsByTagName("head")[0].appendChild( link );
}
}
function removeStyleSheet( url )
{ _enableStyleSheet( _styleSheetUrlToId( url ), false ); }
// "protected" function
function _styleSheetUrlToId( url ){
var urlParts = url.split("/");
return urlParts[urlParts.length-1].split(".")[0]
+ "-style";
}
// "protected" function
// returns if the sheet was found
function _enableStyleSheet( id, enable ) {
if( typeof(enable) == "undefined" ) enable = true;
var sheet = element( id );
if( sheet ) {
sheet.disabled = !enable;
return true;
}
return false;
}