3.6K 132 52

Đã đăng vào thg 6 25, 2017 6:37 CH 11 phút đọc

35.8K

Năm cách để ẩn các phần tử trong CSS

Bài đăng này đã không được cập nhật trong 6 năm

Lời nói đầu

Có nhiều cách để ẩn một phần tử trong CSS. Bạn có thể ẩn nó bằng cách đặt opacity xuống 0, visibility sang hidden, display sang none hoặc bằng cách đặt các giá trị cực trị cho vị trí tuyệt đối.

Bạn có bao giờ tự hỏi tại sao chúng ta có rất nhiều kỹ thuật giấu một phần tử khi tất cả chúng dường như cùng làm một điều tương tự ?

Tất cả các phương pháp này thực ra có khác nhau một chút và sự khác biệt này chỉ ra mỗi phương pháp nên được sử dụng trong một trường hợp cụ thể. Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên.

Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên.

Nội dung

1 , Opacity

Thuộc tính opacity là để thiết lập transparency (độ trong suốt ) của phần tử. Nó không được thiết kế để thay đổi khung giới hạn của phần tử dưới bất kỳ hính thức nào.

Điều này có nghĩa là cài đặt opacity xuống 0 chỉ giấu đi phần tử một cách trực quan. Phần tử vẫn chiếm vị trí của nó và ảnh hưởng đến bố cục của trang web. Nó cũng sẽ phản hồi lại với tương tác của người dùng.

.hide {
    opacity: 0;
}

Nếu bạn định sử dụng thuộc tính opacity để ẩn hoàn toàn khỏi màn hình – thật tiếc, điều này là không thể. Phần tử và tất cả nội dung của nó sẽ vẫn được browser hiển thị (hiển thị trắng), giống như tất cả các phần tử khác trên trang web. Nói cách khác, phần tử vẫn hoạt động (vẫn bắt được các sự tương tác từ user) như cách nó khi chưa bị làm mờ.

Chính vì thế tôi khuyến nghị nên sử dụng thuộc tính opacity tạo ra các hiệu ứng sinh động.

Hãy xem demo

Khi bạn di chuột qua khối thứ hai bị ẩn, phần tử sẽ chuyển đổi trôi chảy từ trạng thái trong suốt hoàn toàn sang rõ ràng. Và khi chuột ko còn ở khối thứ 2 nữa thì khối này bị ẩn đi. Điều này chứng tỏ ràng, khối bị ẩn đi vẫn có thể tiếp nhận các sự tương tác từ user.

2,Visibility

Thuộc tính tiếp theo trong danh sách là Visibility khả năng hiển thị. Cài đặt thuộc tính này sẽ làm ẩn phần tử .

Cũng giống như thuộc tính opacity, phần tử ẩn sẽ vẫn ảnh hưởng đến bố cục của trang web. Sự khác biệt duy nhất là thời gian này nó sẽ không nắm bắt bất kỳ tương tác nào của người dùng khi bị ẩn khỏi người dùng.

Thuộc tính này cũng có thể làm được các hình ảnh động miễn là các trạng thái ban đầu và cuối cùng có các giá trị khác nhau. Điều này bảo đảm rằng quá trình chuyển đổi giữa các trạng thái hiển thị có thể được trơn tru thay vì đột ngột.

.hide {
     visibility: hidden;
}

Demi sự khác nhau giữa Visibility và Opacity

Lưu ý rằng các phần tử con của một phần tử với visibility đặt ở hidden vẫn có thể vẫn hiển thị nếu thuộc tính visibility của chúng được đặt về visible.
Hãy thử di chuột qua phần tử ẩn và không nằm trong đoạn văn bên, bạn sẽ thấy con trỏ truột của bạn không thay đổi thành con trỏ hình ngón tay.
Hơn nữa, nếu bạn cố nhấp vào phần tử, các nhấp chuột của bạn sẽ không được tạo ra bất kì sự kiện nào.
Thẻ <p> bên trong <div> vẫn sẽ nắm bắt tất cả hoạt động của chuột. Ngay khi bạn di chuột qua văn bản, biểu tượng <div> sẽ được phát hiện và bắt đầu ghi nhận các sự kiện(con trỏ chuột thay đổi và background của cả div thay đổi)

4, Display

Thuộc tính display ẩn phần tử theo đúng ý nghĩa thực của từ đó. Thiết lập display về none bảo đảm khối sẽ không được tạo ra.

Sử dụng thuộc tính này, không có không gian trống nào để lại phía sau khi phần tử đã bị ẩn đi. Không chỉ vậy, bất kỳ tương tác trực tiếp (click, mouse_up, ..v..v. ) nào của người dùng sẽ không thể thực hiện khi display được đặt ở none.

Hơn nữa, người đọc sẽ không đọc được nội dung của phần tử. Nó giống như thể phần tử không hề tồn tại.

Tất cả các hậu duệ của phần tử cũng sẽ bị giấu kín. Thuộc tính này không thể được các animation vì vậy sự chuyển tiếp giữa các trạng thái khác nhau luôn luôn đột ngột.

Xin lưu ý, phần tử vẫn có thể truy cập qua DOM . Bạn sẽ có thể thao tác nó giống như với bất kỳ yếu tố khác.

.hide {
     display: none;
}

Hãy xem CSS của bản demo này

Bạn sẽ thấy rằng khối thứ hai có một đoạn văn với thuộc tính display được thiết lập về block nhưng đoạn văn vẫn vô hình. Đây là một sự khác biệt nữa giữa visibility: hidden và display: none. Trong trường hợp đầu tiên, bất kỳ hậu duệ nào được thiết lập visibility về visible sẽ được hiển thị nhưng đó không phải là những gì xảy ra với display. Tất cả các phần tử con được giấu kín bất kể giá trị của thuộc tính hiển thị.

Bây giờ, di chuột một vài lần trên khối đầu tiên trong bản giới thiệu. Đã hoàn tác? Nhấp vào khối đầu tiên này. Điều này sẽ làm cho khối thứ hai nhìn thấy được. Giá trị bên trong bây giờ là một con số khác không. Điều này là do phần tử, mặc dù ẩn với người dùng nhưng vẫn có thể được thao tác bằng JavaScript.

4, Position

Giả sử bạn có một phần tử mà bạn muốn tương tác nhưng bạn không muốn nó ảnh hưởng đến việc bố trí trang web của bạn. Không có cách nào có thể xử lý khả quan đến lúc này. Một điều bạn có thể làm trong trường hợp này là di chuyển các phần tử ra khỏi khung nhìn. Bằng cách đó nó sẽ không ảnh hưởng đến việc bố trí và vẫn hoạt động được. Đây là cách CSS làm điều đó:

.hide {
     position: absolute;
     top: -9999px;
     left: -9999px;
}

Hãy xem demo này Ý tưởng chính ở đây là đặt các giá trị bên trái và âm cao đủ cao để phần tử không còn hiển thị trên màn hình nữa. Một lợi ích (hoặc nhược điểm tiềm ẩn) của kỹ thuật này là nội dung của một phần tử xác định có thể được đọc bởi các trình đọc màn hình. Điều này hoàn toàn dễ hiểu bởi vì bạn chỉ di chuyển các phần tử ra khỏi khung nhìn để người dùng không thể nhìn thấy nó.

5, Clip-path

Một cách khác để ẩn các phần tử bằng cách cắt chúng. Trước đây, điều này có thể được thực hiện với thuộc tính clip nhưng sau đó không được ủng hộ vì có một thuộc tính tốt hơn được gọi là clip-path.

Nitish Kumar gần đây đã giới thiệu một clip-path tại SitePoint, vì vậy hãy thoải mái thử nghiệm một thuộc tính có hiệu quả cao vượt trội.

Lưu ý rằng thuộc tính clip-path được sử dụng bên dưới không được hỗ trợ đầy đủ trong IE hoặc Edge. Thuộc tính clip-path khi được sử dụng để ẩn một phần tử sẽ như sau:

.hide {
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Xem Demo trong link này

Nếu bạn di chuột qua phần tử đầu tiên, nó có thể ảnh hưởng đến phần tử thứ hai mặc dù nó được ẩn đi qua clip-path.
Nếu bạn nhấp chuột vào phần tử, nó sẽ loại bỏ các lớp ẩn để tiết lộ các phần tử của chúng ta đã có trước ở đó. Văn bản này vẫn có thể đọc được bởi browser
Mặc dù phần tử của chúng ta không còn nhìn thấy nữa, các phần tử xung quanh nó vẫn hoạt động như thể nó có kích thước chữ nhật ban đầu.
Lưu ý rằng các tương tác của người dùng như di chuột hoặc nhấp chuột không thể thực hiện ở bên ngoài khu vực bị cắt xén. Trong trường hợp của chúng tôi, điều này hàm ý rằng người dùng sẽ không thể tương tác trực tiếp với các phần tử ẩn.

Kết luận

Trong hướng dẫn này, chúng tôi đã xem xét năm phương pháp ẩn các phần tử khác nhau với CSS. Mỗi phương pháp đều khác nhau theo cách này hay cách khác. Biết được những gì bạn muốn có thể giúp bạn quyết định phương pháp nào sẽ sử dụng .

Nguồn

https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

HTML