Heim > Web-Frontend > Front-End-Fragen und Antworten > Welche drei CSS-Methoden gibt es, um Dom-Elemente auszublenden?

Welche drei CSS-Methoden gibt es, um Dom-Elemente auszublenden?

青灯夜游
Freigeben: 2021-12-09 16:01:04
Original
4382 Leute haben es durchsucht

Drei CSS-Methoden zum Ausblenden von DOM-Elementen: 1. Fügen Sie den Stil „visibility:hidden;“ zum DOM-Element hinzu. " zum DOM-Element. "Stil.

Welche drei CSS-Methoden gibt es, um Dom-Elemente auszublenden?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Drei CSS-Methoden zum Ausblenden von Dom-Elementen

1. visibility:hidden;visibility:hidden;

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

2、diaplay:none;

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

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

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

3、opacity:0;

Wenn Sie den Wert auf „hidden“ setzen, wird unser Element ausgeblendet. Ebenso wie das Opazitätsattribut haben ausgeblendete Elemente weiterhin Auswirkungen auf das Layout unserer Webseite. Der einzige Unterschied zur Opazität besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert. Darüber hinaus werden Elemente in der Bildschirmlesesoftware ausgeblendet.

2. diaplay:none;

Das Anzeigeattribut verbirgt tatsächlich Elemente entsprechend der Bedeutung des Wortes. Wenn Sie die Anzeigeeigenschaft auf „Keine“ setzen, wird sichergestellt, dass das Element nicht sichtbar ist und nicht einmal das Boxmodell generiert wird. Mit diesem Attribut belegen ausgeblendete Elemente keinen Platz. Darüber hinaus sind alle direkten Benutzerinteraktionsvorgänge am Element nicht wirksam, sobald die Anzeige auf „Keine“ gesetzt ist. Darüber hinaus liest die Bildschirmlesesoftware den Inhalt des Elements nicht. Auf diese Weise entsteht der Effekt, als ob das Element überhaupt nicht existierte. 🎜🎜 Alle von diesem Element abgeleiteten Elemente werden gleichzeitig ebenfalls ausgeblendet. Eine Überanimation dieser Eigenschaft hat keine Auswirkung; jeder Übergang zwischen ihren verschiedenen Zustandswerten wird immer sofort wirksam. 🎜🎜 Bitte beachten Sie jedoch, dass auf dieses Element weiterhin über das DOM zugegriffen werden kann. Sie können es also über das DOM manipulieren. Genau wie andere Elemente, die nicht ausgeblendet sind, wie z. B. $("") usw. 🎜🎜🎜3. opacity:0;🎜🎜🎜Das opacity-Attribut bedeutet, die Transparenz eines Elements festzulegen. Es ist nicht dazu gedacht, den Begrenzungsrahmen eines Elements zu ändern. Dieses Bit setzt die Deckkraft nur auf 0, um das Element optisch auszublenden. Während das Element selbst immer noch seine eigene Position einnimmt und zum Layout der Webseite beiträgt, reagiert es auch auf Benutzerinteraktionen. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWelche drei CSS-Methoden gibt es, um Dom-Elemente auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage