JavaScript를 사용하여 여러 CSS 스타일시트 간에 전환하는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript를 사용하여 여러 CSS 스타일시트 간에 전환하는 방법을 배웁니다.

TutorialsPoint 웹사이트의 테마를 전환하면 전체 웹사이트의 CSS가 어떻게 변경되는지 궁금한 적이 있나요? 이것은 간단한 대답입니다. 사용자가 버튼을 누르면 흰색 테마의 스타일시트가 제거되고 어두운 테마의 스타일시트가 추가되는 등 웹사이트의 CSS 스타일시트가 전환됩니다.

여기에서는 JavaScript를 사용하여 여러 CSS 파일 간을 전환하는 예를 살펴보겠습니다.

문법

사용자는 다음 구문에 따라 JavaScript를 사용하여 여러 CSS 파일 간에 전환할 수 있습니다.

으아악

위 구문에서 사용자는 dark.css 스타일이 애플리케이션에 적용되는지 확인하기 위해 dark.css 파일의 전체 경로를 추가해야 합니다. 그에 따라 CSS 파일을 전환해야 하기 때문입니다.

예 1

아래 예에서는 헤더의 스타일시트에 대한 링크를 추가했습니다. href 속성의 값으로 파일 경로를 추가해야 합니다.

사용자가 "테마 전환" 버튼을 클릭할 때마다changeStlye() 함수가 호출됩니다. ChangeStyle() 함수에서는 ID로 "link" 요소에 액세스합니다. 또한 'href' 속성의 값이 dark.css 파일의 경로와 동일한지 확인하고 이를 'light.css' 파일의 경로로 변경합니다. 그렇지 않으면 'dark.css' 파일로 이동합니다. .

사용자는 각 파일에 다음 코드를 추가하고 테마 전환을 클릭하여 스타일시트를 전환할 수 있습니다.

파일 이름: index.html

으아악

파일 이름: dark.css

으아악

파일 이름: light.css

으아악

예 2

아래 예에서는 네 가지 스타일시트를 만들었습니다. 또한 각 CSS 파일의 웹 페이지에 다양한 스타일을 추가했습니다.

사용자가 버튼을 클릭할 때마다 스타일시트의 경로를 사용하여 chageSheet() 함수가 실행됩니다. JavaScript에서는 매개변수에서 얻은 setAttribute() 메소드를 사용하여 href 속성 값을 설정합니다.

사용자는 다양한 버튼을 클릭하여 웹페이지 스타일의 변화를 관찰할 수 있습니다.

파일 이름: -index.html

으아악

파일 이름:- style1.css

으아악

파일 이름:- style2.css

으아악

파일 이름:- style3.css

으아악

파일 이름:- style4.css

으아악

사용자는 이 튜토리얼에서 여러 CSS 파일 간을 전환하는 방법을 배웠습니다. 이는 테마 간 전환이 필요할 때 필수적인 기능입니다. 첫 번째 예에서는 href 속성에 액세스하고 해당 값을 설정합니다. 두 번째 예에서는 setAttribute() 메서드를 사용하여 "href" 속성의 새 값을 설정합니다.

위 내용은 JavaScript를 사용하여 여러 CSS 스타일시트 간에 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!