Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
1- CSS Visibility
CSS Visibility được sử dụng để ẩn hoặc hiện một phần tử mà không làm thay đổi bố cục [Layout] của tài liệu. Nó cũng có thể làm ẩn một hàng [row] hoặc một nhóm hàng [row group], hoặc ẩn một cột [column] hoặc một nhóm cột [column group] của một bảng. được sử dụng để ẩn hoặc hiện một phần tử mà không làm thay đổi bố cục [Layout] của tài liệu. Nó cũng có thể làm ẩn một hàng [row] hoặc một nhóm hàng [row group], hoặc ẩn một cột [column] hoặc một nhóm cột [column group] của một bảng.
/* Example: */
visibility: visible|hidden|collapse|initial|inherit;
Các giá trị có thể của CSS Visibility: CSS Visibility:
Giá trị | Mô tả | ||||
visible | [Mặc định], Các phần tử "có thể được nhìn thấy" [visible] là mặc định. | ||||
hidden | Làm một phần tử trở thành vô hình [invisible], nhưng nó vẫn chiếm không gian. | ||||
collapse | Giá trị này chỉ sử dụng cho các phần tử , , , , , [Của một bảng] để ẩn phần tử này, và giải phóng không gian mà nó chiếm. Nếu bạn sử dụng giá trị này cho các phần tử khác, nó sẽ hoạt động giống với giá trị "hidden". , , , initial
| Sét đặt giá trị cho thuộc tính [property] này trở về giá trị mặc định. | inherit
| Giá trị của nó sẽ được thừa kế từ phần tử cha. | |
CSS {display:none} cũng làm ẩn một phần tử, nhưng nó sẽ giải phóng không gian mà phần tử đang chiếm, vì vậy nó có thể làm thay đổi bố cục của tài liệu. cũng làm ẩn một phần tử, nhưng nó sẽ giải phóng không gian mà phần tử đang chiếm, vì vậy nó có thể làm thay đổi bố cục của tài liệu.
2- CSS {visibility:hidden}
CSS {visibility:hidden} làm một phần tử trở thành vô hình [invisible], nhưng nó không giải phóng không gian mà phần tử đang chiếm, vì vậy không làm thay đổi bố cục của tài liệu. làm một phần tử trở thành vô hình [invisible], nhưng nó không giải phóng không gian mà phần tử đang chiếm, vì vậy không làm thay đổi bố cục của tài liệu.
visibility-hidden-example.html
CSS {visibility:hidden}
function showHideImage[event] {
var myImage = document.getElementById["myImage"];
var visibilityValue = myImage.style.visibility;
if[visibilityValue !== "hidden"] {
myImage.style.visibility = "hidden";
} else {
myImage.style.visibility = "visible";
}
}
CSS {visibility:hidden}
Show/Hide Image
Apollo 11 was the spaceflight that landed the first humans,
Americans Neil Armstrong and Buzz Aldrin,
on the Moon on July 20, 1969, at 20:18 UTC.
Armstrong became the first to step onto the lunar
surface 6 hours later on July 21 at 02:56 UTC.
3- CSS {visibility:collapse}
CSS {visibility:collapse} chỉ được sử dụng cho một trong các phần tử , , , , , [Của một bảng] để ẩn phần tử này, và giải phóng không gian mà nó chiếm. Nếu bạn sử dụng giá trị này cho các phần tử khác, nó sẽ hoạt động giống với giá trị "hidden". chỉ được sử dụng cho một trong các phần tử , , , , , , CSS {visibility: hidden | collapse} làm việc tốt với các hàng [Row] và các nhóm các hàng [Row group] của một bảng. Cụ thể là các phần tử , , , . làm việc tốt với các hàng [Row] và các nhóm các hàng [Row group] của một bảng. Cụ thể là các phần tử , , , visibility-collapse-row-example.html
Works for elements: TR, THEAD, TBODY, TFOOT.
{visibility:visible}
, CSS {visibility: collapse} có thể làm việc tốt với các cột [Column] và các nhóm các cột [Column group] của một bảng trong một vài trình duyệt. Các giá trị khác sẽ bị bỏ qua, hoặc bị đối xử như {visibility: visible}. có thể làm việc tốt với
các cột [Column] và các nhóm các cột [Column group] của một bảng trong một vài trình duyệt. Các giá trị khác sẽ bị bỏ qua, hoặc bị đối xử như {visibility: visible}.
visibility-collapse-col-example.html
{visibility:visible}
CSS {visibility:collapse} works with COL, COLGROUP elements in Firefox [Not Chrome]. Chrome Show/Hide Columns? hide-table-col-example.html hide-table-col-example.js Nếu bạn muốn ẩn một hoặc nhiều cột của một bảng, cách tốt nhất là ẩn tất cả các ô của các cột đó, cách này được hỗ trợ bởi tất cả các trình duyệt. , , [Của một bảng] để ẩn phần tử này, và giải phóng không gian mà nó chiếm. Nếu bạn sử dụng giá trị này cho các phần tử khác, nó sẽ hoạt động giống với giá trị
"hidden". .
CSS {visibility:collapse}
table {
border: 1px solid;
margin-top: 10px;
}
th, td {
border: 1px solid;
padding: 5px;
}
#myRow {
background: lightgreen;
}
function setVisibilityValue[newValue] {
var myRow = document.getElementById["myRow"];
myRow.style.visibility = newValue;
var myNote = document.getElementById["myNote"];
myNote.innerHTML = "{visibility: " + newValue+"}";
}
CSS {visibility:visible | hidden | collapse}
Visible
Hidden
Collapse
No
First Name
Last Name
1
Hillary
Clinton
2
Donald
Trump
,
CSS {visibility:hidden}
CSS {visibility:collapse}
Firefox
Chrome
CSS {visibility:collapse}
table {
border: 1px solid;
margin-top: 10px;
}
th, td {
border: 1px solid;
padding: 5px;
}
function setVisibilityValue[newValue] {
var myColGroup = document.getElementById["myColGroup"];
myColGroup.style.visibility = newValue;
var myNote = document.getElementById["myNote"];
myNote.innerHTML = "{visibility: " + newValue+"}";
}
CSS {visibility:visible | hidden | collapse}
Visible
Hidden
Collapse
COL, COLGROUP Elements
No
ISBN
Title
Price
Description
1
3476896
My first HTML
$53
..
2
5869207
My first CSS
$49
..
CSS {visibility:hidden} does not work with COL, COLGROUP elements in Firefox and Chrome.
CSS {visibility:collapse}
table {
border: 1px solid;
margin-top: 10px;
}
th, td {
border: 1px solid;
padding: 5px;
}
.my-cell {
background-color: lightgreen;
}
.cell-hide {
display: none;
}
Show/Hide Table Columns
Hide
Show
No
ISBN
Title
Price
Description
1
3476896
My first HTML
$53
..
2
5869207
My first CSS
$49
..
function showOrHideCells[show] {
var elements = document.getElementsByClassName["my-cell"];
var copiedElements = [... elements];
for[var i=0; i< copiedElements.length; i++] {
if[show] {
copiedElements[i].classList.remove["cell-hide"];
} else {
copiedElements[i].classList.add["cell-hide"];
}
}
}
Chủ Đề