Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo
Kết quả của người học
Khi hoàn thành bài tập này
- bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
- bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML
Các hoạt động
Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ
mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu
Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành
Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện title
Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào
Hiển thị đồng hồ
Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript [bạn sẽ hiểu tại sao trong giây lát]
Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock[], bạn cần tạo một hàm toggleClock[]. Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn
function toggleClock[] { // get the clock var myClock = document.getElementById['clock']; // get the current value of the clock's display property var displaySetting = myClock.style.display; // also get the clock button, so we can change what it says var clockButton = document.getElementById['clockButton']; // now toggle the clock and the button text, depending on current state if [displaySetting == 'block'] { // clock is visible. hide it myClock.style.display = 'none'; // change button text clockButton.innerHTML = 'Show clock'; } else { // clock is hidden. show it myClock.style.display = 'block'; // change button text clockButton.innerHTML = 'Hide clock'; } }
Trong hàm toggleClock[] mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản [HTML bên trong] trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào
Tất cả đã được làm xong?
Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo
Để ẩn một đoạn bằng JavaScript, hãy lấy tham chiếu đến thành phần đoạn đó và gán giá trị của "none"
cho thuộc tính element.style.display
Thí dụ
► Chạy ⟳ Đặt lại
Phần kết luận
Trong Hướng dẫn JavaScript này, chúng ta đã học cách ẩn một đoạn bằng JavaScript
Hướng dẫn liên quan
- Làm cách nào để thay đổi màu đường viền của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi bán kính đường viền của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi kiểu đường viền của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi độ rộng đường viền của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi đường viền dưới cùng của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi màu phông chữ của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi họ phông chữ của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi kích thước phông chữ của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi độ dày phông chữ của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi chiều cao của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi đường viền bên trái của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi lề của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi độ mờ của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi phần đệm của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi đoạn văn bản thành chữ đậm trong JavaScript?
- Làm cách nào để thay đổi văn bản đoạn văn thành chữ nghiêng trong JavaScript?
- Làm cách nào để thay đổi đường viền bên phải của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi đường viền trên cùng của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi độ rộng của đoạn trong JavaScript?
- Làm cách nào để thay đổi màu nền của đoạn văn trong JavaScript?
- Làm cách nào để thay đổi đường viền của đoạn văn trong JavaScript?
- Làm cách nào để xóa kiểu nội tuyến của đoạn văn trong JavaScript?
- Làm cách nào để gạch chân văn bản trong đoạn văn trong JavaScript?
- Làm cách nào để thay đổi Văn bản trong Đoạn bằng JavaScript?
- Làm cách nào để có được Thuộc tính của Phần tử Đoạn văn trong JavaScript?
❮ Trước Sau ❯
Bài viết được đọc nhiều nhất
Các câu hỏi phỏng vấn Java thường gặp nhất Tìm hiểu tính đóng gói trong Java với các chương trình mẫu Hướng dẫn về Kotlin - Tìm hiểu ngôn ngữ lập trình Kotlin Ví dụ Java để đọc một chuỗi từ bảng điều khiểnKiểm tra Kiến thức cơ bản về Java của bạn với Bài kiểm tra Java của chúng tôi
➥ Tải xuống PDF - Cách Ẩn Đoạn trong JavaScript?