Quelles sont les trois méthodes CSS pour masquer les éléments dom

Trois méthodes CSS pour masquer les éléments DOM : 1. Ajoutez le style "visibility:hidden;" à l'élément DOM ; 2. Ajoutez le style "diaplay:none;" à l'élément DOM ; " à l'élément DOM. " style.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Trois méthodes CSS pour masquer les éléments dom

1. visibility:hidden;visibility:hidden;

将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。

2、diaplay:none;

display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

    不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。就跟其他未被隐藏的元素一样，例如$(“”)等

3、opacity:0;

Définir sa valeur sur caché masquera notre élément. Comme l'attribut opacité, les éléments masqués ont toujours un effet sur la mise en page de notre page Web. La seule différence avec l'opacité est qu'elle ne répond à aucune interaction de l'utilisateur. De plus, des éléments seront masqués dans les logiciels de lecture d’écran.

2. diaplay:none;

L'attribut display masque véritablement les éléments selon le sens du mot. Définir la propriété display sur none garantit que l'élément n'est pas visible et que même le modèle de boîte n'est pas généré. Grâce à cet attribut, les éléments masqués n'occupent aucun espace. De plus, une fois l'affichage défini sur aucun, toute opération d'interaction directe de l'utilisateur sur l'élément ne sera pas efficace. De plus, les logiciels de lecture d’écran ne liront pas le contenu de l’élément. De cette façon, l'effet est comme si l'élément n'existait pas du tout. 🎜🎜 Tous les éléments descendants de cet élément seront également masqués en même temps. La suranimation de cette propriété n'a aucun effet ; toute transition entre ses différentes valeurs d'état prendra toujours effet immédiatement. 🎜🎜 Veuillez toutefois noter que cet élément est toujours accessible via le DOM. Vous pouvez donc le manipuler via le DOM. Tout comme les autres éléments qui ne sont pas masqués, comme $(""), etc. 🎜🎜🎜3 opacity:0;🎜🎜🎜L'attribut opacity signifie définir la transparence d'un élément. Il n’est pas conçu pour modifier le cadre de délimitation d’un élément. Ce bit définit l'opacité sur 0 uniquement pour masquer visuellement l'élément. Même si l’élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web, il répondra également à l’interaction de l’utilisateur. 🎜🎜(Partage de vidéos d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!