Удаление или замена таблицы стилей (a <ссылкa>) с помощью JavaScript/jQuery

Ответ 1

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

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

например

document.styleSheets[0].disabled = true;

//поэтому в вашем случае с помощью jquery try

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

Ответ 2

Мне удалось сделать это с помощью

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

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

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

нет jQuery-решения

если вы можете добавить id в свой тег ссылки

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

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

Ответ 5

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

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

Заменить таблицу стилей:

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

Ответ 6

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

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

Ответ 7

Решение ES6:

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

Используйте его как disableStyle("MyUnwantedFile.css"); ,

Ответ 8

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

Ответ 9

Если вы хотите сделать это только с атрибутом href:

$('link[href="#" onclick="location.href='https://example.com/mycss.css'; return false;"]').remove()