Đặt lại kiểu dáng qua style trong JavaScript
Giả sử chúng ta quyết định ẩn một phần tử dựa trên một sự kiện nào đó:
elem.style.display = 'none';
Bây giờ giả sử chúng ta quyết định hiển thị
nó trở lại. Điều này có nghĩa là thuộc tính
display cần
được khôi phục về giá trị ban đầu của nó.
Ví dụ, như thế này:
elem.style.display = 'block';
Vấn đề là điều này không tiện lợi.
Bởi vì giá trị ban đầu không nhất thiết
là block. Nó có thể
là flex, hoặc inline-block,
hoặc một giá trị khác. Nó có thể được chúng ta đặt
trong file CSS, hoặc có thể được trình duyệt
lấy theo mặc định. Việc theo dõi giá trị
đúng là rất khó khăn.
May mắn thay, có một cách dễ dàng để trả lại giá trị ban đầu của thuộc tính. Chỉ cần gán cho thuộc tính đó một chuỗi rỗng làm giá trị:
elem.style.display = '';
Cho một thẻ div và hai nút bấm. Khi click vào nút thứ nhất hãy ẩn thẻ div đi, và khi click vào nút thứ hai - hãy hiển thị nó.
Cho một thẻ div và hai nút bấm. Khi click vào nút thứ nhất hãy đổi màu nền của div thành màu đỏ, và khi click vào nút thứ hai - hãy trả lại màu ban đầu.