복붙노트

[JQUERY] 분리 또는 JavaScript / 스타일 시트와 jQuery (a <링크>) 대신

JQUERY

분리 또는 JavaScript / 스타일 시트와 jQuery (a <링크>) 대신

해결법


  1. 1.즉 맞추 당신은하지 작업, 그것은 또한 내가 정확히 기억한다면 경우에 따라 충돌이 발생할 수 있습니다 할 요소를 제거하므로 메모리에 CSS 스타일을 유지으로 비활성화 된 스타일 시트를 설정해야합니다.

    즉 맞추 당신은하지 작업, 그것은 또한 내가 정확히 기억한다면 경우에 따라 충돌이 발생할 수 있습니다 할 요소를 제거하므로 메모리에 CSS 스타일을 유지으로 비활성화 된 스타일 시트를 설정해야합니다.

    이것은 또한 크로스 브라우저에서 작동합니다.

    예컨대

    document.styleSheets[0].disabled = true;
    

    // 그래서 귀하의 경우 JQuery와 시도를 사용하여

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

  2. 2.나는 그것을 할 관리 :

    나는 그것을 할 관리 :

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

    메모리에서 스타일을 제거하는 유일한 방법입니다 보인다. 나는 추가 :

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

    너무 요소를 제거합니다.


  3. 3.선택한 스타일 시트를 사용하지 않으려면 :

    선택한 스타일 시트를 사용하지 않으려면 :

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

    당신이 스타일을 다시 적용 할 싶지 않을 경우, 다음 .remove ()를 할 수 있습니다. 그러나 당신이 할 수 있도록하려면 나중에 다시 사용하도록 설정하는 것이하지 않습니다.

    에 스타일 시트를 다시 활성화, (같은 당신이 스타일 시트의 요소를 제거하지 않은으로)이 작업을 수행 :

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

    위의 코드에서는하지 .attr, .prop 사용하는 것이 중요합니다. 당신이 .attr 사용하는 경우, 코드는 파이어 폭스를 일부 브라우저에서 작동하지만,하지 않습니다. 이것은, MDN에 따라, 장애인이 HTMLLinkElement DOM 개체의 속성이기 때문이지만, 링크 HTML 요소의하지 속성. 하는 HTML 속성이 비표준이기 때문에 비활성화 사용.


  4. 4.의 j くえ ry そぅちおん

    의 j くえ ry そぅちおん

    당신은 당신의 링크 태그에 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;
            }
        }
    };
    

    참고 : "DIR1 /있는 style.css"와 "DIR2 /있는 style.css"을하지 않아도 확실 스타일 파일 이름이 고유합니다. 이 경우 그것은 단지 제 1 호 양식을 사용하지 않도록 설정합니다.


  5. 5.순수 자바 스크립트를 사용 :

    순수 자바 스크립트를 사용 :

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

  6. 6.스타일 시트를 제거하려면 :

    스타일 시트를 제거하려면 :

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

    스타일 시트를 교체하려면 :

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

  7. 7.ES6 솔루션 :

    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. 8.만 HREF 특성을 함께하고 싶어 :

    만 HREF 특성을 함께하고 싶어 :

    $('link[href="https://example.com/mycss.css"]').remove()
    

  9. 9.여기에 크로스 브라우저 문제를 방지하기 위해 이러한 다른 게시물의 숫자에 언급하지 않도록 원리를 사용하여 추가 및 제거 양입니다. 시트가 이미 존재하는 경우 내 추가 검사가 단지 그것을 가능하게하는 경우, 참조하는 방법을합니다. 또한, 일부 답변과 달리, 이것은 (ID 또는 제목 속성의 사용에서 클라이언트를 절연) 함수의 유일한 인수로 .CSS 파일에 대한 URL을 사용하여 작동하도록 설계되었습니다.

    여기에 크로스 브라우저 문제를 방지하기 위해 이러한 다른 게시물의 숫자에 언급하지 않도록 원리를 사용하여 추가 및 제거 양입니다. 시트가 이미 존재하는 경우 내 추가 검사가 단지 그것을 가능하게하는 경우, 참조하는 방법을합니다. 또한, 일부 답변과 달리, 이것은 (ID 또는 제목 속성의 사용에서 클라이언트를 절연) 함수의 유일한 인수로 .CSS 파일에 대한 URL을 사용하여 작동하도록 설계되었습니다.

    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;
    }
    
  10. from https://stackoverflow.com/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery by cc-by-sa and MIT license