Chuyển đổi Giữa Chế độ Sáng Và Tối Bằng CSS Và JavaScript

Đang load dữ liệu

• Trang chủ
• Các khoá đào tạo

  • Chuyên đề WEB - PHP

    • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
    • Lập trình web frontend - reactjs - [75 giờ]
    • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

    Chuyên đề Mobile

    • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
    • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

    Chuyên đề JAVA

    • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
    • Lập trình ứng dụng với java - [100 giờ]
    • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

    Chuyên đề NETWORK/SECURITY

    • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
    • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
    • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

    Chuyên đề .NET

    • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
    • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
    • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

    Chuyên đề khác

    • Ngôn ngũ lập trình C/C++ - [80 giờ]
• Lập trình cho trẻ em
• Dịch vụ
  • Đào tạo theo như cầu
  • Cung cấp thiết bị - Phần mềm
  • Tư vấn - Thiết kế mạng hạ tầng
  • Tư vấn - Triển khai dịch vụ mạng
  • Tư vấn - Tư vấn, triển khai giám sát hệ thống
  • Thực tập dự án
• Lịch khai giảng
• Tin tức
  • Tin tức và sự kiện
  • Tin hoạt động
  • Tin công nghệ
  • Hội thảo, workshop, Codecam
  • Thông tin việc làm
  • Cẩm nang chia sẻ kiến thức
• Tiện ích
• Liên hệ

Cẩm nang chia sẻ kiến thức

Nov - 2020 03 Chuyển đổi giữa chế độ sáng và tối bằng CSS và JavaScript Cẩm nang chia sẻ kiến thức

Bước 1: Thêm HTML

Sử dụng bất kỳ phần tử nào lưu trữ nội dung muốn chuyển đổi thiết kế. Ở đây, ta sẽ sử dụng

nhé:

Bước 2: Thêm CSS

Tạo kiểu cho phần tử body và tạo một .dark-mode để chuyển đổi chế độ sáng - tối:

Bước 3: Thêm Javascript

Nhận phần tử body và chuyển đổi giữa các lớp .dark-mode :

Note:

• element.classList là một đối tượng đặc biệt với các phương thức cho add/remove/toggle một lớp duy nhất.
• element.classList.toggle(“class”) – thêm lớp nếu nó không tồn tại, nếu không thì xóa nó.

Để xem kết quả chúng ta xem demo này nhé : Chuyển đổi chế độ sáng - tối

Nguồn: Devmaster Academy

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI... 5 Phương pháp hay để mở rộng các dự án React của b... Lab06.1 - Data Access In ASPNET MVC 5 Lab05 - Data Validation and Annotation In ASPNET M... Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn... Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

	Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
	Lập trình ứng dụng trên nền tảng android
	Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
	Lập trình ứng dụng với WINDOWS FORM
	Lập trình ứng dụng với JAVA (FORM)
	Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
	Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
	Lập trình frontend với reacjs (Full)