How TO - Toggle Hide and Show
Toggle between hiding and showing an element with JavaScript.
Click the button!
Toggle [Hide/Show] an Element
Step 1] Add HTML:Example
Click Me
This is my DIV element.
This is my DIV element.
Hướng dẫn show/hide div javascript - hiển thị / ẩn div javascript
Example
Click Me
var x = document.getElementById["myDIV"];
if [x.style.display === "none"] {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
This is my DIV element.
Step 2] Add JavaScript: For more information about Display and Visibility, read our CSS Display Tutorial.
Đề bài: Hãy viết ứng dụng ẩn và hiện thẻ div bằng Javascript bằng cách tạo ra 2 button, khi click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ div.: Hãy viết ứng dụng ẩn và hiện thẻ div bằng Javascript bằng cách tạo ra 2 button, khi click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ div.
freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
1 để hiển thị thẻ
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
2, và thuộc tính
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
3 để ẩn thẻ div. Nhưng vấn đề là ta phải sử dụng Javascript để làm điều này, nên phải sử dụng cú pháp dưới đây để thay đổi giá trị cho thuộc tính display CSS.document.getElementById['id_name'].style.display = "block|none";
Sau đây là bài giải tham khảo.
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
Nếu bạn sử dụng jQuery thì rất đơn giản, chỉ cần áp dụng hai hàm show và hide là có thể ẩn và hiện nội dung bất kì.
Bài viết này được đăng tại [free tuts .net]
Danh sách file tải về
| Download mã nguồn | freetuts.net hoặc gameportable.net |
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, có lẽ bạn chỉ muốn thay đổi thuộc tính
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 của phần tử: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 vẫn muốn phần tử chiếm không gian [như nếu bạn ẩn một ô bảng], bạn có thể thay đổi thuộc tính
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
5 của phần tử thay thế: thay vào đó: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 lại từng phần tử và thay đổi phần tử
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 thành
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
7: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']];
Hiển thị một bộ sưu tập các yếu tố:
Hầu hết thời gian, có lẽ bạn sẽ chỉ cần chuyển đổi giữa
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
8 và
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
9, điều đó có nghĩa là những điều sau đây có thể đủ khi hiển thị một bộ sưu tập các yếu tố.Bạn có thể tùy chọn chỉ định
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 mong muốn là đối số thứ hai nếu bạn không muốn nó mặc định là element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
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
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ỉ đơn thuần là loại bỏ kiểu dáng nội tuyến
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 để hoàn nguyên nó trở lại trạng thái ban đầu. Sau đó kiểm tra kiểu
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 được tính toán của phần tử để xác định xem nó có bị ẩn bởi một quy tắc xếp tầng hay không. Nếu vậy, sau đó hiển thị phần 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';
}
}
}
. Bạn sẽ biết giá trị thuộc tính
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 ban đầu thực sự của phần tử và bạn sẽ không phải mã hóa một giá trị để có được kết quả mong muốn.]Chuyển đổi màn hình:
Tương tự, nếu bạn muốn chuyển đổi
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 của một phần tử hoặc bộ sưu tập các phần tử, bạn có thể chỉ cần lặp lại từng phần tử và xác định xem nó có hiển thị hay không bằng cách kiểm tra giá trị tính toán của thuộc tính
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4.Nếu có thể nhìn thấy, hãy đặt
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 thành
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
7, nếu không thì hãy xóa kiểu dáng
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 và nếu nó vẫn còn ẩn, hãy đặt
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
4 thành giá trị được chỉ định hoặc mặc định được mã hóa cứng, element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
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';
}
}
Javascript Example
Ẩn và hiện thẻ div bằng Javascript
Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net
document.getElementById["btn1"]. title = function [] {
document.getElementById["content"].style.display = 'none';
};
document.getElementById["btn2"]. title = function [] {
document.getElementById["content"].style.display = 'block';
};
0