Hvordan skjule HTML -elementer i CSS

Det kan være en situasjon, når du ikke vil at noe innhold skal vises på en webside. For eksempel er websidekomponentene, for eksempel navigasjonslinjen, topptekst, bunntekst og mer. Noen ganger mens vi designer en spesifikk del av webapplikasjonen vår, må vi ofte skjule noen av komponentene. For tilsvarende er det mange metoder for å skjule HTML -elementer ved bruk av CSS.

Utfallet av denne bloggen er:

• Hvordan skjule HTML -elementer med CSS?
• Metode 1: Skjul HTML -elementer ved hjelp av CSS “Display: None” -egenskaper
• Metode 2: Skjul HTML -elementer ved å bruke "skjult" eiendom
• Metode 3: Skjul HTML -elementer ved bruk av CSS “Synlighet: skjult” eiendom
• Metode 4: Skjul HTML -elementer ved bruk av CSS “Filter: Opacity (0)” -egenskaper
• Metode 5: Skjul HTML-elementer ved hjelp av CSS “Clip-Path: Circle (0)” -egenskaper
• Metode 6: Skjul HTML -elementer ved bruk av CSS “Overflow: Hidden” -egenskaper
• Metode 7: Skjul HTML -elementer ved bruk av CSS “Opacity: 0” -egenskaper
• Metode 8: Skjul HTML -elementer ved bruk av CSS “Transform: Scale (0)” -egenskaper
• Metode 9: Skjul HTML -elementer ved å bruke egenskaper med "gjennomsiktig" effekt

Hvordan skjule HTML -elementer med CSS?

Mange mulige metoder for CSS brukes til å skjule HTML -elementer. Noen av dem er listet opp nedenfor:

• Display: Ingen
• Skjult eiendom
• Synlighet: Skjult
• Filter: Opacity (0)
• Clip-Path Property
• Overløp: Skjult
• Opacitet: 0
• Transform: Skala (0)
• gjennomsiktig
• skriftstørrelse

La oss utdype hver av de ovennevnte metodene en etter en. Men før det vil vi opprette en HTML -fil for demonstrasjonen.

Forutsetning: Opprett HTML -side

I HTML -filen, inne i kroppselementet, først, legg til en "”Element. Inne i dette er det to avsnitts tagger, hver tilknyttet den unike ID -en "først”Og“sekund”, Henholdsvis:

Første avsnitt!

Andre avsnitt!

Metode 1: Skjul HTML -elementer ved hjelp av CSS “Display: None” -egenskaper

CSS “vise”Eiendom med verdien”ingen”Fjerner elementet og lar andre elementer ta sin plass. For eksempel ønsker vi å skjule andre ledd. For dette blir den diskuterte CSS -egenskapen brukt på den som vist nedenfor:

#sekund
Display: Ingen;

• “#sekund”Henviser til div med ID sekund.
• “vise”Eiendom tildeles verdien”ingen”:

Det kan sees at nå er andre ledd skjult:

Metode 2: Skjul HTML -elementer ved å bruke "skjult" eiendom

En annen metode for å skjule HTML -elementet er å skrive “skjult”Attributt med elementet som følger:

Andre avsnitt!

Det kan observeres at det første elementet er skjult:

Metode 3: Skjul HTML -elementer ved bruk av CSS “Synlighet: skjult” eiendom

CSS “synlighet”Eiendom kan også brukes til å bare skjule elementet, på en slik måte at andre elementer ikke kan ta sin plass. I eksemplet nedenfor, "synlighet”Eiendomsverdien er satt som“skjult”For det første HTML -elementet:

#First
Synlighet: skjult;

Den tilsvarende utgangen kan sees fra det undergitte bildet:

Metode 4: Skjul HTML -elementer ved bruk av CSS “Filter: Opacity (0)” -egenskaper

Filteret bruker åpenhet for elementene. I eksemplet "filter”Eiendom er tildelt verdi som“Opacitet (0)”, Som betyr at det vil være helt gjennomsiktig på websiden:

#sekund
filter: opacitet (0);

Fra skjermen nedenfor kan vi observere at avsnittet med ID “sekund”Er skjult:

Metode 5: Skjul HTML-elementer ved hjelp av CSS “Clip-Path: Circle (0)” -egenskaper

Egenskapen til utklippet indikerer hvilken del av websiden.

I det følgende eksemplet "Clip-Path”Eiendom som har verdien”sirkel (0)”Indikerer at intet innhold vises relatert til den ekstra taggen:

#First
Clip-Path: Circle (0);

Her er utgangsskjermen, som representerer at det andre elementet vises og første ledd ikke er synlig:

Metode 6: Skjul HTML -elementer ved bruk av CSS “Overflow: Hidden” -egenskaper

“flyte”Eiendom tildeles verdien”skjult”For å kontrollere innholdet. Som et resultat klippes flyt, og det gjenværende innholdet er skjult:

#sekund
Høyde: 0px;
Bredde: 0px;
overløp: skjult;

• Sett først høyden og bredden på Div ID sekundet som 0px.
• Innholdet vil strømme over fra det spesifiserte området.
• Og så "flyte”Eiendom tildeles verdien”skjult”For å skjule innholdet.

Fra utgangen nedenfor kan vi se at det andre elementet ikke er synlig:

Metode 7: Skjul HTML -elementer ved bruk av CSS “Opacity: 0” -egenskaper

Opacitetsnivået er elementets gjennomsiktighetsnivå. “Opacitet”Eiendom med verdien”0”Betyr at elementet vil være fullt gjennomsiktig:

#First
Opacitet: 0;

Produksjon

Metode 8: Skjul HTML -elementer ved bruk av CSS “Transform: Scale (0)” -egenskaper

“skala ()”Funksjon endrer størrelsen på elementet horisontalt og vertikalt. Skalaen (0) verdien av “forvandle”Eiendom indikerer at elementet er dimensjonert til null betyr at det er skjult:

#First
Transform: skala (0);

Produksjon

Metode 9: Skjul HTML -elementer ved å bruke egenskaper med "gjennomsiktig" effekt

La oss gjøre det andre elementet helt gjennomsiktig. For dette, tilordne “bakgrunnsfarge”Og“farge”Eiendomsverdier som“gjennomsiktig”:

#sekund
bakgrunnsfarge: gjennomsiktig;
Farge: gjennomsiktig;

Det andre elementet er fullt gjennomsiktig sammenlignet med det første. Derfor kan det ikke sees på skjermen:

Vi har forklart noen av de mulige CSS -metodene for å skjule HTML -elementer.

Konklusjon

CSS lar oss bruke forskjellige egenskaper for å skjule HTML -elementene. Disse egenskapene inkluderer "Display: Ingen”,“skjult”,“Synlighet: Skjult”,“Filter: Opacity (0)”,“Klippsti: sirkel (0)”,“Overløp: Skjult”,“Opacitet: 0”,“Transform: Skala (0)”, Eller bruke andre egenskaper som farge med“gjennomsiktig”Effekt. Denne bloggen diskuterte prosedyrene for å skjule HTML -elementer ved hjelp av CSS.