Ngôn ngữ CSS - CSS Visibility
Bài trước
Bài sau

Thuộc tính Visibility

Thuộc tính này có tác dụng thiết lập xem một thuộc tính có được nhìn thấy hay không.

Một phần tử ẩn cũng chiếm không gian trên trang. Bằng cách sử dụng thuộc tính hiển thị, bạn có thể tạo ra các phần tử ẩn không chiếm không gian trong trang web.

Cú pháp:

visibility: visible|hidden|collapse|initial|inherit;

Bảng các tham số giá trị:

Giá trị Mô tả
visible Hiển thị thành phần đang ẩn.
hidden Ẩn thành phần đang hiện thị.
collapse làm sổ ra các hàng và cột của table, giá trị này chỉ sử dụng được cho thẻ table.
initial Khỏi tạo giá trị ban đầu cho thành phần
inherit Kế thừa từ thành phần cha.

Ví dụ:


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Học CSS toidicode.com</title>
</head>
<style type="text/css" media="screen">
    div{
        background-color: gray;
        width: 100%;
        height: 70px;
        margin-top: 2px;
    }
    table{
        background-color: orange;
        width: 250px;
        padding: 10px;
        visibility: visible;
    }
</style>
<body>
    <span>
        <input type="radio" name="visibility" value="visible" onclick="changeProperties(this)" checked=""> visible 
        <input type="radio" name="visibility" value="hidden" onclick="changeProperties(this)"> hidden 
        <input type="radio" name="visibility" value="collapse" onclick="changeProperties(this)"> collapse 
    </span>
    <table border="1">
        <thead>
            <tr>
                <th>Họ và Tên</th>
                <th>Giới tính</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Nguyễn Thị Như Nhộng</td>
                <td>Nữ</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        function changeProperties(el)
        {
            document.getElementsByTagName('table')[0].style.visibility = el.value;
        }
    </script>
</body>
</html>

Xem ví dụ

 


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×