Cách hiển thị hoặc ẩn một phần tử:
Để hiển thị hoặc ẩn một phần tử, thao tác thuộc tính kiểu của phần tử . Trong hầu hết các trường hợp, bạn có lẽ chỉ muốn thay đổi của phần tử displaybất động sản :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Ngoài ra, nếu bạn sẽ vẫn như nguyên tố này để chiếm không gian (như nếu bạn đã che giấu một ô trong bảng), bạn có thể thay đổi của phần tử visibilitybất động sản thay vì:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Ẩn một bộ sưu tập các yếu tố:
Nếu bạn muốn ẩn một bộ sưu tập các phần tử, chỉ cần lặp qua từng phần tử và thay đổi phần tử displaythành none:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
Hiển thị một bộ sưu tập các yếu tố:
Hầu hết thời gian, bạn có thể sẽ chỉ chuyển đổi giữa display: nonevà display: block, điều đó có nghĩa là những điều sau đây có thể là đủ khi hiển thị một bộ sưu tập các yếu tố.
Bạn có thể tùy ý chỉ định mong muốn displaylàm đối số thứ hai nếu bạn không muốn nó mặc định block.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
Ngoài ra, một cách tiếp cận tốt hơn để hiển thị (các) phần tử sẽ chỉ là loại bỏ displaykiểu dáng nội tuyến để hoàn nguyên nó về trạng thái ban đầu. Sau đó kiểm tra displaykiểu tính toán của phần tử để xác định xem nó có bị ẩn theo quy tắc xếp tầng hay không. Nếu vậy, sau đó hiển thị các yếu tố.
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(Nếu bạn muốn mang nó một bước xa hơn, bạn có thể thậm chí bắt chước những gì jQuery làm và xác định phong cách trình duyệt mặc định của phần tử bằng cách thêm yếu tố để một trống iframe(không có kiểu mâu thuẫn) và sau đó lấy lại phong cách tính toán. Bằng cách đó, bạn sẽ biết displaygiá trị thuộc tính ban đầu thực sự của phần tử và bạn sẽ không phải mã hóa giá trị để có kết quả mong muốn.)
Bật màn hình:
Tương tự, nếu bạn muốn chuyển đổi displaymột phần tử hoặc tập hợp các phần tử, bạn có thể chỉ cần lặp lại qua từng phần tử và xác định xem nó có thể nhìn thấy hay không bằng cách kiểm tra giá trị tính toán của thuộc displaytính. Nếu đó là có thể nhìn thấy, thiết lập displayđể none, nếu không loại bỏ các inline displayphong cách, và nếu nó vẫn còn ẩn, thiết lập các displaygiá trị cụ thể hoặc mặc định mã hóa cứng, block.
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>