HTML DOM style propriétés d'affichage
style Objets Définition et utilisation
afficher des ensembles de propriétés ou renvoie le type d'affichage de l'élément.
éléments HTML dans la plupart du temps "en ligne" ou "bloc" éléments: un élément en ligne, dans lequel la gauche et la droite sont le contenu flottant. Un élément de bloc remplir toute la ligne, et rien ne peut être affiché à gauche ou à droite.
attribut d'affichage permet également aux auteurs pour afficher ou masquer un élément. Semblable à la propriété de visibilité. Toutefois, si vous définissez display: none, masquera l'élément entier, si vous définissez visibility: hidden, éléments de contenu ne seront pas visibles, mais les éléments restent la position et la taille d'origine.
grammaire
Définition des propriétés d'affichage:
Renvoie les propriétés d'affichage:
| 值 | 描述 |
|---|---|
| block | 元素呈现为块级元素。 |
| compact | 元素呈现为块级元素或内联元素，取决于上下文。 |
| inherit | display 属性的值从父元素继承。 |
| inline | 默认。元素呈现为内联元素。 |
| inline-block | 元素呈现为内联盒子内的块盒子。 |
| inline-table | 元素呈现为内联表格（类似 <table>），表格前后没有换行符。 |
| list-item | 元素呈现为列表。 |
| marker | 该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。 |
| none | 元素不会被显示。 |
| run-in | 元素呈现为块级或内联元素，取决于上下文。 |
| table | 元素呈现为块级表格（类似 <table>），表格前后带有换行符。 |
| table-caption | 元素呈现为表格标题（类似 <caption>）。 |
| table-cell | 元素呈现为表格单元格（类似 <td> 和 <th>）。 |
| table-column | 元素呈现为单元格的列（类似 <col>）。 |
| table-column-group | 元素呈现为一个或多个列的分组（类似 <colgroup>）。 |
| table-footer-group | 元素呈现为表格页脚行（类似 <tfoot>）。 |
| table-header-group | 元素呈现为表格页眉行（类似 <thead>）。 |
| table-row | 元素呈现为表格行（类似 <tr>）。 |
| table-row-group | 元素呈现为一个或多个行的分组（类似 <tbody>）。 |
support du navigateur
Tous les principaux navigateurs prennent en charge les attributs d'affichage.
Note: IE7 et les versions antérieures ne supportent pas la valeur "inherit".IE8 ne fournit DOCTYPE! Supporté "inherit". soutien IE9 "inherit".
Trucs et astuces
Astuce: Si l'élément de bloc d'élément, son type d'affichage peut être modifié par la propriété float.
Exemples
Exemples
Lorsque vous cliquez sur le bouton lorsque l'élément ne soit pas visible:
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function demoDisplay(){
document.getElementById("p1").style.display="none";
}
function demoVisibility(){
document.getElementById("p2").style.visibility="hidden";
}
</script>
</head>
<body>
<p id="p1">这是一些文本。</p>
<p id="p2">这是一些文本。</p>
<input type="button" onclick="demoDisplay()" value="隐藏显示属性的文本">
<input type="button" onclick="demoVisibility()" value="具有可见性属性的隐藏文本">
</body>
</html>
Essayez »
style Objets