JavaScript/jQuery를 사용하여 웹 사이트의 어두운/밝은 모드를 만드는 방법은 무엇입니까?

어두운 모드는 모든 웹사이트에서 매우 중요합니다. 다양한 관심분야를 가진 사용자들이 웹사이트를 방문합니다. 어떤 사람들은 어두운 모드를 좋아하고 어떤 사람들은 밝은 모드를 좋아합니다.

조사에 따르면 약 70~80%의 사람들이 다크 모드를 선호하고, 20~30%만이 라이트 모드를 선호한다고 합니다. 따라서 사용자가 어두운 모드와 밝은 모드 사이를 전환할 수 있도록 웹사이트에 어두운 모드를 만드는 것이 필요합니다.

아래에서는 HTML, CSS, JavaScript를 사용하여 간단한 웹페이지를 만들어 보겠습니다. 또한 JavaScript와 CSS를 사용하여 밝은 모드와 어두운 모드를 구현하는 방법을 배웁니다.

문법

사용자는 다음 구문에 따라 어두운 테마와 밝은 테마 간에 전환할 수 있습니다.

위 구문에서는 어두운 테마 클래스 이름을 토글 메소드의 매개변수로 전달하고 있습니다. 특정 HTML 요소에서 클래스를 추가하고 제거합니다.

알고리즘

사용자는 다음 알고리즘에 따라 어두운 테마와 밝은 테마 간에 전환할 수 있습니다.

• 1단계 - 웹페이지용 HTML 코드를 작성하고 밝은 테마에 평소와 같이 CSS를 적용합니다.

• 2단계 - CSS를 사용하여 어두운 테마 스타일을 만듭니다.

• 3단계 - 버튼을 만들고 버튼에 onclick 이벤트를 추가합니다. 사용자가 버튼을 클릭하면 어두운 테마와 밝은 테마 간에 전환되어야 합니다.

• 4단계 - 어두운 테마와 밝은 테마 사이를 전환하려면 요소에서 특정 클래스를 추가하고 제거할 수 있습니다. 예를 들어 어두운 테마용 클래스를 만들고 어두운 테마용 CSS를 만듭니다. 바디에 다크테마 클래스를 추가하면 다크테마가 전체 웹사이트에 적용되어야 하고, 제거하면 정상으로 되어야 합니다.

예 1

아래 예에서는 사용자가 버튼을 클릭하면 ChangeMode() 함수를 호출합니다. ChangeMode() 함수는 테마에 따라 버튼의 텍스트를 변경합니다.

또한 document.body를 사용하여 전체 웹페이지에 액세스하고 JavaScript를 사용하여 전체 웹페이지에 dark-theme 클래스를 추가하여 테마를 다크 모드로 변경합니다.

예 2

아래 예에서는 HTML과 CSS를 사용하여 토글 버튼을 만들었습니다. 토글 스위치에는 체크박스를 사용했습니다. 따라서 사용자가 확인란을 선택할 때마다 스위치가 켜집니다. 따라서 체크박스 선택 여부에 따라 어두운 테마에 대한 클래스를 추가하고 제거할 수 있습니다.

또한 JQuery의 addClass() 및 RemoveClass() 메서드를 사용하여 본문에 클래스를 추가하고 제거했습니다.

JavaScript와 JQuery를 사용하여 어두운 모드와 밝은 모드 사이를 전환하는 방법을 배웠습니다. 웹 페이지의 CSS를 변경하고 CSS를 다크 테마에 적용해야 합니다. 웹페이지에서 클래스를 추가하거나 제거하여 CSS를 다크 모드에 적용할 수 있습니다.

위 내용은 JavaScript/jQuery를 사용하여 웹 사이트의 어두운/밝은 모드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!