HTML5 & CSS3

Ẩn thẻ HTML không có nội dung

Chia sẻ nhanh

Trong một số trường hợp khi codding front end, tôi gặp phải rất nhiều các trường hợp phải xử lý dữ liệu trả về NULL. Điều đó chắc chắn sẽ làm bạn phải care nhiều trường hợp hơn rất nhiều với một loạt các câu điều kiện IF ELSE các kiểu. Tuy nhiên với một thuộc tính vô cùng đơn bản ở CSS, sẽ loại bỏ hết tất cả các trường hợp khi dữ liệu trả về NULL 

Thuộc tính :empty cho element sẽ giúp chúng ta làm được việc này

div:empty {
   display: none;
}

Thuộc tính này sẽ kiểm tra nội dung trong phần tử có hay không? nếu không nó sẽ ẩn đi giúp bạn. Tuy nhiên bạn phải hết sức lưu ý với cách thức viết HTML

VD: ở ví dụ dưới dây, các div sẽ bị ẩn vì không chứa nội dung bên trong

<div></div>

<div><!-- test --></div>

Còn ví dụ dưới đây lại không 

<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

Chúc các bạn thành công và có kì nghỉ cuối tuần vui vẻ

 

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?