즉석에서 CSS 파일을 교체 (그리고 페이지에 새로운 스타일을 적용)

해결법

1.새 링크를 생성하고, 새 것으로 이전을 대체 할 수 있습니다. 당신이 함수에 넣어 경우 필요할 때마다, 당신은 그것을 다시 사용할 수 있습니다.

새 링크를 생성하고, 새 것으로 이전을 대체 할 수 있습니다. 당신이 함수에 넣어 경우 필요할 때마다, 당신은 그것을 다시 사용할 수 있습니다.

자바 스크립트 :

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

html로 :

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

단순화하기 위해, 나는 인라인 자바 스크립트를 사용했다. 생산에서 당신은 눈에 거슬리지 이벤트 리스너를 사용하고자하는 것입니다.

2.당신은 문서의 모든 스타일 시트를 포함하고 필요에 따라 활성화 / 비활성화 할 수 있습니다.

당신은 문서의 모든 스타일 시트를 포함하고 필요에 따라 활성화 / 비활성화 할 수 있습니다.

사양의 내 독서에서, 당신은 true에서 false로 비활성화 된 속성을 변경하여 다른 스타일 시트를 활성화 할 수 있어야하지만 파이어 폭스는 제대로이 작업을 수행 할 것으로 보인다.

내가 생각하는 그래서 당신은 몇 가지 옵션이 있습니다 :

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate">

<script>
function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);
</script>

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark">

<script>
function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}
</script>

당신은 등에서 getElementById, querySelector와 스타일 시트 노드를 선택할 수 있습니다

(비표준 <링크가 비활성화>. HTMLLinkElement #이 비활성화 설정하는 것은 비록 괜찮하지 마십시오.)

3.당신은 링크 요소에 ID를 설정하는 경우

당신은 링크 요소에 ID를 설정하는 경우

<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>

당신은 자바 스크립트를 타겟팅 할 수 있습니다

document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';

아니면 그냥 ..

document.getElementById('stylesheet').href='stylesheet2.css';

여기에 더 철저 예는 다음과 같습니다

<head>
    <script>
    function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }
    </script>

    <link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
    <a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
    <a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>

4.jQuery를 사용하면 당신은 확실히 CSS 파일을 교환 할 수 있습니다. 버튼 클릭에이 작업을 수행합니다.

jQuery를 사용하면 당신은 확실히 CSS 파일을 교환 할 수 있습니다. 버튼 클릭에이 작업을 수행합니다.
```
var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');
```
또는 샘의 대답은, 그 역시 작동합니다. 여기 JQuery와 구문이다.
```
$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);
```
5.이 질문은 꽤 오래 그러나 나는 당신이 HTML에서 모두 CSS 파일을 포함하는 여기에 언급되지 않은 접근을 제안하지만, CSS는 같은 것

이 질문은 꽤 오래 그러나 나는 당신이 HTML에서 모두 CSS 파일을 포함하는 여기에 언급되지 않은 접근을 제안하지만, CSS는 같은 것

light.css
```
/*** light.css ***/

p.main{
   color: #222;
}

/*** other light CSS ***/
```
및 dark.css 같은 것
```
/*** dark.css ***/

.dark_layout p.main{
   color: #fff;
   background-color: #222;
}

/*** other dark CSS ***/
```
기본적으로 dark.css의 모든 선택은 .dark의 _layout의 자식이 될 것입니다

그런 다음 당신이해야 할 모든 사람의 선택이 웹 사이트의 테마를 변경하는 경우 body 요소의 클래스를 변경하는 것입니다.
```
$("#changetheme").click(function(){
   $("body").toggleClass("dark_layout");
});
```
그리고 이제 모든 요소는 #changetheme 사용자가 클릭 한 번 어둠의 CSS를해야합니다. 이것은 당신이 CSS의 전처리의 어떤 종류를 사용하는 경우 아주 쉽게 할 수 있습니다.

또한 전환이 매우 원활하게 배경과 색상에 대한 CSS 애니메이션을 추가 할 수 있습니다.
6.JQuery와 .attr () 당신이 당신의 링크 태그 .i.e의 HREF 설정할 수 있습니다 사용

JQuery와 .attr () 당신이 당신의 링크 태그 .i.e의 HREF 설정할 수 있습니다 사용

샘플 코드
```
$("#yourButtonId").on('click',function(){
   $("link").attr(href,yourCssUrl);
});
```
7.어쩌면 내가 너무 복잡하게 생각하고 있어요,하지만 허용 대답은 나를 위해 작동하지 않는 때문에 나는 나뿐만 아니라 내 솔루션을 공유하고자합니다.

어쩌면 내가 너무 복잡하게 생각하고 있어요,하지만 허용 대답은 나를 위해 작동하지 않는 때문에 나는 나뿐만 아니라 내 솔루션을 공유하고자합니다.

이야기: 내가하고 싶었던 것은 '주'스타일에 추가 곳 추가 스타일로 머리에 내 페이지의 서로 다른 '스킨'를 포함하고 페이지 (NO 브라우저 설정이나 물건)에 버튼을 눌러을 전환하는 것이 었습니다.

문제: 샘의 솔루션은 매우 우아 @ 생각하지만 나를 위해 전혀 일을하지 않았다. 문제의 적어도 일부에서 나는 하나 개의 메인 CSS 파일을 사용하고 누락 된 '제목'속성으로 파일을 단지 '스킨'로 정상에 다른 사람을 추가하고, 따라서 나는 그룹에 가지고있어 것입니다.

여기에 내가 무엇을 최대 온 것입니다. 우선 '대체'를 사용하여 머리에 모두 '스킨'을 추가 :
```
<link rel="stylesheet" href="css/main.css" title='main'>
<link rel="stylesheet alternate" href="css/skin1.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin2.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin3.css" class='style-skin' title=''>
```
참고 내가 주 CSS 파일을 제목 = '주'를 포기하고 다른 모든 클래스 = '스타일 피부'도없고 제목이있다. 내가 jQuery를 사용하고 스킨을 전환합니다. 나는 우아한 VanillaJS 버전을 찾기 위해 순수 주의자에 맡겨 :
```
var activeSkin = 0;    
$('#myButton').on('click', function(){
    var skins = $('.style-skin');
    if (activeSkin > skins.length) activeSkin=0;
    skins.each(function(index){
        if (index === activeSkin){
            $(this).prop('title', 'main');
            $(this).prop('disabled', false);
        }else{
            $(this).prop('title', '');
            $(this).prop('disabled', true);
        }
    });
    activeSkin++
});
```
그것이 무엇을하는 것은, 가능한 모든 스킨을 통해 반복 (Iteration) (곧) 활성을 소요, '주'로 제목을 설정하고 활성화합니다. 다른 모든 스킨이 비활성화되어 제목이 제거됩니다.
8.단순히 당신이 당신의 새로운 CSS 파일에 href 속성 링크 업데이트합니다.

단순히 당신이 당신의 새로운 CSS 파일에 href 속성 링크 업데이트합니다.
```
function setStyleSheet(fileName){
       document.getElementById("WhatEverYouAssignIdToStyleSheet").setAttribute('href', fileName);
    }
```

from https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이 주변에 어떤 방법 - jQuery를 이벤트 핸들러는 항상이 결합 된 순서대로 실행? [복제] (0)	2020.10.10
[JQUERY] CORS는 - 어떻게 '프리 플라이트'는 HttpRequest를합니까? (0)	2020.10.09
[JQUERY] 페이지 스크롤없이에 location.hash 수정 (0)	2020.10.09
[JQUERY] 읽기, 만들기 jQuery로 삭제 쿠키 [중복] (0)	2020.10.09
[JQUERY] 어떻게 GET GET와 jQuery로 POST 변수에? (0)	2020.10.09

복붙노트

[JQUERY] 즉석에서 CSS 파일을 교체 (그리고 페이지에 새로운 스타일을 적용)

즉석에서 CSS 파일을 교체 (그리고 페이지에 새로운 스타일을 적용)

해결법

1.새 링크를 생성하고, 새 것으로 이전을 대체 할 수 있습니다. 당신이 함수에 넣어 경우 필요할 때마다, 당신은 그것을 다시 사용할 수 있습니다.

2.당신은 문서의 모든 스타일 시트를 포함하고 필요에 따라 활성화 / 비활성화 할 수 있습니다.

3.당신은 링크 요소에 ID를 설정하는 경우

4.jQuery를 사용하면 당신은 확실히 CSS 파일을 교환 할 수 있습니다. 버튼 클릭에이 작업을 수행합니다.

5.이 질문은 꽤 오래 그러나 나는 당신이 HTML에서 모두 CSS 파일을 포함하는 여기에 언급되지 않은 접근을 제안하지만, CSS는 같은 것

6.JQuery와 .attr () 당신이 당신의 링크 태그 .i.e의 HREF 설정할 수 있습니다 사용

7.어쩌면 내가 너무 복잡하게 생각하고 있어요,하지만 허용 대답은 나를 위해 작동하지 않는 때문에 나는 나뿐만 아니라 내 솔루션을 공유하고자합니다.

8.단순히 당신이 당신의 새로운 CSS 파일에 href 속성 링크 업데이트합니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바