css可见性_CSS可见性–关于以及如何使用它

css可见性

CSS Visibility – About and How to use it

CSS可见性–关于以及如何使用它

Today we will talk about CSS again. And this is will property called ‘visibility’. This property already in CSS since second version (CSS2). All popular browsers like Firefox, IE, Safari, Opera etc already supporting this property.

今天，我们将再次讨论CSS。 这就是称为“可见性”的财产。 自第二版(CSS2)起，此属性已经在CSS中。 所有流行的浏览器(如Firefox，IE，Safari，Opera等)都已支持此属性。

Property Visibility defines – whether the element will be visible or not. Of course – these elements will take space at page. But you always can use ‘display’ property to hide these invisible elements. Visibility property can have four values.

属性可见性定义–元素是否可见。 当然–这些元素将在页面上占用空间。 但是您始终可以使用'display'属性来隐藏这些不可见的元素。 可见性属性可以具有四个值。

this is:

这是：

• collapse – element will hidden. It is usually applied to hide of columns or rows in tables. Note, this value not supported with IE8 and below.
  崩溃-元素将隐藏。 通常应用于隐藏表中的列或行。 请注意，IE8及更低版本不支持此值。
• hidden – element will hidden.
  hidden-元素将被隐藏。
• inherit – element will take value from its parent. Note, this value not supported with IE8 and below.
  继承–元素将从其父元素获取价值。 请注意，IE8及更低版本不支持此值。
• visible – element will visible (this is default value of this property).
  visible –元素将可见(这是此属性的默认值)。

这是使用可见性属性的示例 (Here are sample of using visibility property)

Objects:		A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.
Actions:

对象：		一名男子用邪恶的假牙贿赂了一只兔子，让他乘坐救护车在帆船上与他逃跑。 贿赂考拉将其非法留在一个地方。 树木将我固定在适当的位置。 /您的妈妈开了救护车，但这座城市比它看起来要远。
动作：

这是我们示例的所有html，css和js代码： (And here are all html, css and js code of our sample:)

<table cellspacing="0" cellpadding="0" border="1" class="sample1">
    <tr id="tr1">
        <td>Objects:</td>
        <td id="td1"><img src="visibility.png" alt="sample image - checking visibility" /></td>
        <td id="td2">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</td>
    </tr>
    <tr>
        <td>Actions:</td>
        <td>
            <div><input type="button" value="Hide table cell 1" onclick="applyVisibility('td1', 'hidden');"></div>
            <div><input type="button" value="Hide table cell 2" onclick="applyVisibility('td2', 'hidden');"></div>
            <div><input type="button" value="Show table cell 1" onclick="applyVisibility('td1', 'visible');"></div>
            <div><input type="button" value="Show table cell 2" onclick="applyVisibility('td2', 'visible');"></div>
        </td>
        <td>
            <div><input type="button" value="Collapse row 1" onclick="applyVisibility('tr1', 'collapse');"></div>
            <div><input type="button" value="Hide row 1" onclick="applyVisibility('tr1', 'hidden');"></div>
            <div><input type="button" value="Show row 1" onclick="applyVisibility('tr1', 'visible');"></div>
        </td>
    </tr>
</table>

<table cellspacing="0" cellpadding="0" border="1" class="sample1">
    <tr id="tr1">
        <td>Objects:</td>
        <td id="td1"><img src="visibility.png" alt="sample image - checking visibility" /></td>
        <td id="td2">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</td>
    </tr>
    <tr>
        <td>Actions:</td>
        <td>
            <div><input type="button" value="Hide table cell 1" onclick="applyVisibility('td1', 'hidden');"></div>
            <div><input type="button" value="Hide table cell 2" onclick="applyVisibility('td2', 'hidden');"></div>
            <div><input type="button" value="Show table cell 1" onclick="applyVisibility('td1', 'visible');"></div>
            <div><input type="button" value="Show table cell 2" onclick="applyVisibility('td2', 'visible');"></div>
        </td>
        <td>
            <div><input type="button" value="Collapse row 1" onclick="applyVisibility('tr1', 'collapse');"></div>
            <div><input type="button" value="Hide row 1" onclick="applyVisibility('tr1', 'hidden');"></div>
            <div><input type="button" value="Show row 1" onclick="applyVisibility('tr1', 'visible');"></div>
        </td>
    </tr>
</table>

table.sample1 {width:100%;}
table.sample1 th, table.sample1 td{padding:5px;}

table.sample1 {width:100%;}
table.sample1 th, table.sample1 td{padding:5px;}

function applyVisibility(obj_name, new_value) {
    document.getElementById(obj_name).style.visibility=new_value;
}

function applyVisibility(obj_name, new_value) {
    document.getElementById(obj_name).style.visibility=new_value;
}

结论 (Conclusion)

I hope that our new lesson was useful for you. Good luck!

希望我们的新课程对您有所帮助。 祝好运！

翻译自: https://www.script-tutorials.com/css-visibility-about-and-how/

css可见性