자바 스크립트를 사용하고 있습니까?

그래서 sepereate 페이지가 있습니다. 사용자가 버튼을 클릭하여 웹 사이트의 스타일 시트를 변경하면 각 페이지의 모든 스타일 시트가 선택한 페이지로 변경됩니다.자바 스크립트를 사용하고 있습니까?

외부 자바 스크립트 파일 : 사용자가 버튼을 클릭하면위한

 function ChangeSheet(sheet) 
    { 

     document.getElementById('pagestyle').setAttribute('href', sheet); 

    } 


    pages = { 

     default : 0; 
     design1 : 0; 
     design2 : 0; 


    } 

    function setDefault(var num){ 

     pages.default = num; 
    }

html로 코드 CSS를 변경 :

<p>Click one of the links to change the website design viewing settings.</p> 

      <button onclick="setDefault(1)">Default</button>

번호 1은 사용자가이 하나를 고른 것을 의미 페이지 클래스 내에 저장됩니다. 기본적으로 bool.

html 파일에 자바 스크립트가 내장되어 있으면 외부 자바 스크립트 파일을 가져 오는 링크 ID도 표시됩니다. 내가 버튼을 누를 때

<link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css"> 

    <script src= "swap.js"></script> 

    <script type="text/javascript"> 
     if(pages.default == 1) 
     { 
      ChangeSheet('design1.css'); 

     } 

    </script>

을, 아무 일도 발생하지 않습니다, 그리고 메신저 : 그때 pages.deafult가 1이면 그렇다면, 우리는 'design1.css'스타일 시트로 변경하는 경우, 확인 internel의 JS를 사용하려고 왜? 미안 해요, 내가 웹 사이트 디자인과 자바 스크립트에 매우 익숙하지 않은 경우 이것을 묻지 않아야합니다.

출처

2017-04-22 Anonymous

'if()'는 페이지로드에서만 실행됩니다. 그것은 당신이 당신의 버튼으로'default'를 바꾸기 때문에 다시는 돌아 가지 않을 것입니다. 또한 자바 스크립트는 페이지로드간에 지속성이 없습니다. 그 객체를 어딘가에 저장해야합니다 ... 서버, 쿠키 또는 localStorage – charlietfl

자바 스크립트는 버튼을 클릭하기 전에 pages.default가 1인지 확인합니다. 버튼을 클릭하면 pages.default를 1로 변경하지만 다시는 확인하지 않습니다. –

업데이트를 해결하기 위해 제 답변을 업데이트했습니다. (그것은 페이지로드 사이에 지속성이 필요하다는 charlieftl의 요점을 되풀이하지만 HTML과 JS를 파일 시스템에서 직접 실행하는 경우에도 솔루션을 제공합니다.) – nb1987

-1

문제는 페이지가로드 될 때 (또는 페이지가로드되기 전에 문서의 <head>에 삽입하는 것처럼 보이기 때문에) 포함 스크립트가 즉시 실행된다는 것입니다. 그리고 그 시간에 pages.default이 1이 아니기 때문에 아무 일도 일어나지 않을 것입니다. 해결하려면, 당신은 단순히 당신의 클릭 핸들러가 ChangeSheet를 호출하기 위해 업데이트 할 수 있습니다 :

<button onclick="ChangeSheet('design1.css')">Default</button>

편집 : 나는 당신의 업데이 트를 참조하십시오. 다른 사용자가 주석에서 언급했듯이, 사용자가 선호하는 스타일 시트를 저장하기 위해 어떤 종류의 영속성 메커니즘을 사용해야 할 것입니다. 그러나 YouTube 동영상에서이 자습서를 따르면 로컬 파일 시스템 (file:/// 프로토콜)에서 HTML 및 JavaScript를 실행하고 있으므로 아마도 쿠키 또는 localStorage을 사용할 수 없으며 사용자의 환경 설정을 저장하는 서버가 있어야합니다. 지속성에 대한 옵션은 극히 제한적이지만 속성은 window.name 속성을 사용하여 일부 데이터를 유지합니다 (Javascript/HTML Storage Options Under File Protocol (file://) 참조). 이것은 이 아니고 인 경우 가장 좋은 솔루션입니다 (해킹과 같은 것입니다).하지만 그 중 하나만 사용하는 것이 좋습니다.

HTML (임베디드 JS) :

<!doctype html> 
<html> 
<head> 
    <link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css"> 
    <script src="./swap.js"></script> 
    <script type="text/javascript"> 
     if (window.name) { 
      ChangeSheet(window.name); 
     } 
    </script> 
</head> 
<body> 
    <button onclick="ChangeSheet('design1.css')">Design 1</button> 
    <button onclick="ChangeSheet('design2.css')">Design 2</button> 
</body> 
</html>

swap.js :

function ChangeSheet(sheet) 
{ 
    window.name = sheet; 
    document.getElementById('pagestyle').setAttribute('href', sheet); 

}

design1.css (물론 당신이 원하는 스타일로 변경할 수 있습니다) :

body { 
    background-color: blue; 
}

design2.css (원하는 스타일로 변경할 수 있음)

스타일 중 하나를 설정 한 후 페이지를 새로 고치고 스타일 기본 설정이 유지되는 것을 확인하거나로드 할 다른 페이지가있는 경우 해당 페이지를 앞뒤로 탐색해볼 수 있습니다.

출처

2017-04-22 17:10:59 nb1987

정말 고맙습니다. 이전에는이 방법을 시도했지만 창은 없었습니다 .이름. 시간과 안내에 감사드립니다. –

아마도 link 태그의 속성을 변경하는 대신 특정 클래스를 body 태그로 설정하여 CSS를 변경하면 좋을지도 모릅니다.

CSS 테마의 크기는 얼마나됩니까? 어쨌든 CSS 테마를 추가 한 5-10KB의 CSS를 추가하는 것이 나쁜 습관이라고 생각지 않습니다.

body className을 수정하면 위와 같은 해커처럼 보이는 솔루션에 의지 할 필요가 없습니다.

출처

2017-04-22 17:12:17 Denialos

외부 파일을 사용해야하는 경우 외부 파일을 서버에서 문서에 포함하기 때문에 클라이언트에 전송하므로 문서가 클라이언트 쪽에서 스타일을 변경하는 가장 좋은 방법으로 다시로드 될 때까지 변경되지 않습니다. 자바 스크립트 함수 자체에서 값을 변경하거나 페이지를 새로 고침 해보세요.

출처

2017-04-22 18:36:39 Osama

자바 스크립트를 사용하고 있습니까?

답변

관련 문제