Up5me
Trang chủ > Câu hỏi lẻ > GJwG6N7Um8Rs

Đề bài

Phương án nào sau đây nêu đúng tác dụng của thuộc tính visibility:hidden;?

Làm mờ phần tử.
Làm phần tử trở nên trong suốt.
Không hiển thị phần tử trên trình duyệt web.
Hiển thị phần tử với định dạng chuẩn trên trình duyệt web.
Đáp án đúng: B

Xem lời giải

Phương pháp giải

Lời giải chi tiết

Để giải quyết bài tập này, chúng ta cần hiểu cụ thể tác dụng của thuộc tính visibility trong CSS. Thuộc tính visibility có các giá trị phổ biến như: visible, hidden, collapse, vv.

Trong đó, visibility:hidden; sẽ làm phần tử không hiển thị trên trang web nhưng vẫn chiếm không gian như khi phần tử đó có hiển thị. Đặc biệt, phần tử đó vẫn tồn tại trong cây DOM và các sự kiện liên quan có thể vẫn diễn ra.

Hãy phân tích các lựa chọn:

  • A. Làm mờ phần tử: Đây là tác dụng của thuộc tính opacity, không liên quan đến visibility.
  • B. Làm phần tử trở nên trong suốt: Giống như lựa chọn A, thuộc tính ảnh hưởng đến độ trong suốt phải là opacity.
  • C. Không hiển thị phần tử trên trình duyệt web: Chính xác. Đáp án này mô tả đúng về tác dụng của visibility:hidden;, phần tử không hiển thị nhưng vẫn chiếm không gian trong trang.
  • D. Hiển thị phần tử với định dạng chuẩn trên trình duyệt web: Đây không phải là tác dụng của visibility:hidden;.

Vậy, phương án đúng là C. Không hiển thị phần tử trên trình duyệt web.

Chú ý khi giải

  • Phân biệt giữa thuộc tính visibilitydisplay. Mặc dù cả hai đều có thể ẩn phần tử trên trang, nhưng display:none; sẽ hoàn toàn loại bỏ phần tử khỏi luồng tài liệu, không chỉ là ẩn hiển thị.
  • Khi cần làm mờ hoặc tạo hiệu ứng trong suốt cho phần tử, hãy sử dụng thuộc tính opacity, không phải visibility.
  • Nên nhớ rằng visibility:hidden; giữ không gian của phần tử trong khi ẩn chúng, điều này có thể ảnh hưởng đến bố cục tổng thể của trang web.