Rimozione o sostituzione di un foglio di stile (un ) con JavaScript / jQuery

Come posso fare questo?

Provai

$('link[title="mystyle"]').remove(); 

e sebbene l’elemento sia rimosso, gli stili sono ancora applicati alla pagina corrente (sia in Opera che in Firefox).

C’è un altro modo?

Per soddisfare cio ‘, devi impostare il foglio di stile in modo che sia disabilitato in quanto mantiene gli stili css in memoria, quindi rimuovere l’elemento non funzionerà, può anche causare il crash in alcuni casi se non ricordo male.

Questo funziona anche per browser incrociato.

per esempio

 document.styleSheets[0].disabled = true; 

// quindi nel tuo caso usando jquery try

 $('link[title=mystyle]')[0].disabled=true; 

Sono riuscito a farlo con:

 $('link[title="mystyle"]').attr('disabled', 'disabled'); 

sembra che questo sia l’unico modo per rimuovere gli stili dalla memoria. poi ho aggiunto:

 $('link[title="mystyle"]').remove(); 

rimuovere anche l’elemento.

Per disabilitare il foglio di stile selezionato:

 $('link[title="mystyle"]').prop('disabled', true); 

Se non vuoi mai applicare di nuovo quel foglio di stile, puoi quindi .remove() it. Ma non farlo se vuoi essere in grado di ritriggersrlo in seguito.

Per ritriggersre il foglio di stile, fallo (se non hai remove l’elemento del foglio di stile):

 $('link[title="mystyle"]').prop('disabled', false); 

Nel codice sopra, è importante usare .prop , not .attr . Se usi .attr , il codice funzionerà con alcuni browser, ma non con Firefox. Questo perché, in base a MDN , disabled è una proprietà dell’object DOM HTMLLinkElement , ma non un attributo dell’elemento HTML del link . L’utilizzo disabled come attributo HTML non è standard.

nessuna soluzione jQuery

se puoi aggiungere id al tuo tag link

  document.getElementById("styles-animations").disabled = true; 

se conosci la posizione dell’indice del tuo file css nel documento

 document.styleSheets[0].disabled = true; // first document.styleSheets[document.styleSheets.length - 1].disabled = true; // last 

se vuoi disabilitare lo stile per nome puoi usare questa funzione

 /** * @param [string] [styleName] [filename with suffix eg "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; } } }; 

nota: assicurati che il nome del file di stile sia univoco in modo da non avere "dir1 / style.css" e "dir2 / style.css". In tal caso, disabiliterebbe solo il primo stile.

Per rimuovere un foglio di stile:

 $('link[src=""]').remove(); 

Per sostituire un foglio di stile:

 $('link[src=""]').attr('src',''); 

Utilizzando puro javascript:

 var stylesheet = document.getElementById('stylesheetID'); stylesheet.parentNode.removeChild(stylesheet); 

Ecco sia un add & remove che utilizza il principio di disabilitazione menzionato in un certo numero di questi altri post per prevenire problemi di browser multiplo. Nota come il mio add controlla per vedere se il foglio esiste già, nel qual caso lo abilita. Inoltre, a differenza di alcune risposte, questo è progettato per funzionare usando l’url in un file .css come unico argomento delle funzioni (isolando il client dall’uso degli attributi id o title ).

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