Удаление или замена таблицы стилей (<link>) на JavaScript / jQuery

Question

Как я могу это сделать?

Я пытался

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

и хотя элемент удален, стили все еще применяются к текущей странице (как в Opera, так и в Firefox).

Есть ли другой способ?

Answer 1

Для удовлетворения, т. Е. Вам нужно отключить таблицу стилей, поскольку она сохраняет стили CSS в памяти, поэтому удаление элемента не будет работать, в некоторых случаях это может привести к сбою, если я правильно помню.

Это также работает для кросс-браузера.

* 1005 например *

document.styleSheets[0].disabled = true;

// поэтому в вашем случае используйте jquery try

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

Answer 2

Мне удалось сделать это с:

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

Кажется, это единственный способ удалить стили из памяти.затем я добавил:

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

, чтобы удалить элемент тоже.

Answer 3

Чтобы отключить выбранную таблицу стилей:

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

Если вы никогда не хотите, чтобы эта таблица стилей применялась снова, вы можете .remove() ее. Но не делайте этого, если вы захотите включить его позже.

Чтобы снова включить таблицу стилей, сделайте это (если вы не remove элемент таблицы стилей):

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

В приведенном выше коде важно использовать .prop, а не .attr. Если вы используете .attr, код будет работать в некоторых браузерах, но не в Firefox. Это связано с тем, что в соответствии с MDN , disabled является свойством объекта HTMLLinkElement DOM , но не атрибутом link HTML элемент. Использование disabled в качестве атрибута HTML является нестандартным.

Answer 4

нет решения jQuery

, если вы можете добавить идентификатор к тегу ссылки

<link rel="stylesheet" href="css/animations.css" id="styles-animations">

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

, если вам известна позиция индекса вашего CSS-файла в документе

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

если вы хотите отключить стиль по имени, вы можете использовать эту функцию

/**
 * @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;
        }
    }
};

примечание: убедитесь, что имя файла стиля уникально, чтобы у вас не было "dir1 / style.css" и "dir2 / style.CSS».В этом случае будет отключен только первый стиль.

Answer 5

Чтобы удалить таблицу стилей:

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

Чтобы заменить таблицу стилей:

$('link[src="<path>"]').attr('src','<NEW_FILE_PATH>');

Answer 6

Использование чистого JavaScript:

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

Answer 7

Здесь вы можете добавлять и удалять, используя принцип отключения, упомянутый в ряде этих других публикаций, чтобы предотвратить проблемы между браузерами.Обратите внимание, что мой add проверяет, существует ли уже лист, и в этом случае он просто активирует его.Кроме того, в отличие от некоторых ответов, он предназначен для работы с использованием URL-адреса файла .css в качестве единственного аргумента функций (изоляция клиента от использования атрибутов id или 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;
}