두 개의 버튼을 하나 (토글)로 바꾸십시오

Question

두 개의 버튼 중 하나를 클릭 한 후 두 개의 다른 외부 .css를 바꿔서 작동시키는이 코드가 있습니다. 그러나이 코드를 변경하고 이들 사이를 전환하는 하나의 버튼 만 만들어야합니다 두 개의 .css 파일. 고마워요

<script type="text/javascript"> 

    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); 
    } 
</script> 

<a href="#" onclick="changeCSS('css/main.css', 1);">STYLE 1</a> 
<a href="#" onclick="changeCSS('css/main2.css', 1);">STYLE 2</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

Answer 1

var cssFiles = ['css/main.css', 'css/main2.css']; 
var currentFile = 0; 

function changeCSS(cssLinkIndex) { 

    if(currentFile + 1 < cssFiles.length) currentFile++; 
    else currentFile = 0; 

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

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

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

당신은 다음과 같은 것을 호출 할 수 있습니다 :

<a href="#" onclick="changeCSS(1);">CHANGE STYLE</a> 

그것은 단순히 버튼을 클릭 할 때마다 증가되는 카운터를 유지하고이의 이름을 포함하고있는 배열의 다른 인덱스를 가리 키도록 당신의 스타일 시트. 카운터가 최대 값에 도달하면 0으로 랩되고 다시 시작됩니다.

Answer 2

이렇게하려면 플래그가 있어야 현재 스타일을 구분할 수 있습니다. 예를 들어 버튼에 클래스를 추가하고이 클래스를 기반으로 다른 스타일을로드 할 수 있습니다. 각 클릭에서 실제 상태를 최신으로 유지하려면 해당 플래그를 업데이트해야합니다.

Answer 3

이 같은 뭔가를해야만 할 수있는이 같은

<script type="text/javascript"> 

    var cssFile = "css/main.css"; 

    function changeCSS(cssLinkIndex) { 

    if (cssFile == "css/main.css") 
     cssFile = "css/main2.css"; 
    else 
     cssFile = "css/main.css"; 

    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); 
    } 
</script> 

<a href="#" onclick="changeCSS(1);">STYLE 1</a> 
<a href="#" onclick="changeCSS(1);">STYLE 2</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

Answer 4

뭔가 작동합니다 :

<script type="text/javascript"> 

var CSSToggle = false; 

function changeCSS(cssLinkIndex) { 

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

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

    If(CSSToggle){ 
     cssFile = "main.css"; 
    } else { 
     cssFile = "main2.css"; 
    } 

    newlink.setAttribute("href", cssFile); 

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 
} 
</script> 

<a href="#" onclick="changeCSS(1);">Toggle styles</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

그러나, CSS 파일을 전환 청소기 방법이 있습니다. 예를 들어, 당신과 같이, 하나의 CSS 파일을 사용할 수 있습니다 : 당신이 전환 할 때

body.styles1 div.box { //styles here } 
body.styles2 div.box { //styles here } 

그런 다음 styles1 또는 styles2 신체 클래스를 변경합니다. 더 적은 HTTP 요청 (CSS를 약간 부 풀리지 만)과 DOM 작업 횟수는 적습니다.