W3.JS Ẩn & Hiện


w3.hide(selector)

Ẩn các phần tử bằng cách sử dụng Id phần tử

Để ẩn một phần tử có id đã chỉ định, hãy sử dụng thẻ băm (#) ở phía trước tên id.

Ẩn một phần tử có id = "London":

Thí dụ

<button onclick="w3.hide('#London')">Hide</button>


Ẩn các phần tử bằng cách sử dụng tên thẻ

Để ẩn tất cả các phần tử có tên thẻ được chỉ định, hãy sử dụng tên thẻ (không có dấu <và>) làm bộ chọn.

Ẩn tất cả các phần tử <h2>:

Thí dụ

<button onclick="w3.hide('h2')">Hide</button>


Ẩn các phần tử bằng cách sử dụng tên lớp

Để ẩn tất cả các phần tử có tên lớp đã chỉ định, hãy sử dụng dấu chấm (.) Trước tên lớp.

Ẩn các phần tử với class = "city":

Thí dụ

<button onclick="w3.hide('.city')">Hide</button>


Hiển thị các phần tử bằng cách sử dụng Id phần tử

Để hiển thị một phần tử có id đã chỉ định, hãy sử dụng thẻ băm (#) ở phía trước tên id.

Hiển thị một phần tử có id = "London":

Thí dụ

<button onclick="w3.show('#London')">Show</button>


Hiển thị các phần tử bằng cách sử dụng tên thẻ

Để hiển thị tất cả các phần tử có tên thẻ được chỉ định, hãy sử dụng tên thẻ (không có dấu <và>) làm bộ chọn.

Hiển thị tất cả các phần tử <h2>:

Thí dụ

<button onclick="w3.show('h2')">Show</button>


Hiển thị các phần tử bằng cách sử dụng tên lớp

Để hiển thị tất cả các phần tử có tên lớp đã chỉ định, hãy sử dụng dấu chấm (.) Trước tên lớp.

Hiển thị các phần tử với class = "city":

Thí dụ

<button onclick="w3.show('.city')">Show</button>

Chuyển đổi Ẩn / Hiện

w3.toggleShow(selector)

Chuyển đổi Ẩn và Hiện bằng Id phần tử

Chuyển đổi giữa ẩn và hiển thị một phần tử có id = "London":

Thí dụ

<button onclick="w3.toggleShow('#London')">Toggle Hide/Show</button>


Chuyển đổi Ẩn và Hiển thị bằng cách sử dụng tên thẻ

Chuyển đổi giữa ẩn và hiển thị tất cả các phần tử <h2>:

Thí dụ

<button onclick="w3.toggleShow('h2')">Toggle Hide/Show</button>


Chuyển đổi Ẩn và Hiện bằng Tên Lớp

Chuyển đổi giữa ẩn và hiển thị các phần tử với class = "city":

Thí dụ

<button onclick="w3.toggleShow('.city')">Toggle Hide/Show</button>