Hvordan kan jeg endre CSS -skjerm ingen eller blokkere eiendom ved hjelp av jQuery

JavaScript- eller jQuery -funksjonen med display ingen og displayblokkegenskaper brukes til å skjule og vise innholdet henholdsvis. Det skal være knapper som vises på grensesnittet som er opprettet med HTML -kodene og JavaScript -funksjonene som refererer til disse knappene, slik at Display None og Display Block -funksjonen fungerer når brukeren klikker på den respektive knappen.

Opprette knapper som har "Vis ingen" og "Display Block" -egenskaper

Knappemerkene brukes til å lage knapper i HTML, og jQuery (JavaScript Library) brukes deretter til å legge til funksjonalitet til knappene.

Eksempel: Vis ingen og visningsblokk for en DIV -beholder
La oss diskutere det med et enkelt eksempel for å skjule og vise en DIV -beholder ved hjelp av “vis ingen”Og“skjermblokk" egenskaper:

Gjemme seg
Vise

Div container

I kodebiten over er det tagger for å lage knapper og en DIV -beholder:

• Det er knappeknappen med "knapp”Erklært som sin type. Inne i åpningsknappen er koden “gjemme seg”Klasse opprettet, og mellom åpnings- og lukkeknappemerkene er teksten som vises på knappen.
• Tilsvarende er det en annen knappemerke med den andre klassen som heter forestilling, og teksten som skal vises på knappen er "Vise“.
• Deretter er det Div -taggen med ID som heter “demo,”Og så skal teksten vises på div container, i.e., “Div container“.

I skriptelementet eller i en egen JavaScript -fil, bør det være funksjoner med visning ingen og visningsblokkegenskaper:

$ (dokument).klar (funksjon ()
$ (".gjemme seg").klikk (funksjon ()
$ ("#demo").CSS ("Display", "Ingen");
);
$ (".forestilling").klikk (funksjon ()
$ ("#demo").CSS ("Display", "Block");
);
);

I kodebiten over er det JavaScript -funksjonene som er lagt til for å lage funksjonaliteten for knappene:

• Det er “klar”Funksjon som utfører funksjonen inne i den når HTML -dokumentet eller websiden er lastet på nettleseren.
• Inne i hovedklar”Funksjon, det er“Klikk”Funksjon som refererer til“gjemme seg”Klasse (klassen som er opprettet for skjuleknappen. Inne i denne funksjonen er det CSS -funksjonen med "vis ingen”Eiendom som refererer til“demo”Id. Dette betyr at når brukeren klikker på "gjemme seg”-Knappen,“vis ingen”Eiendom vil utføre.
• Tilsvarende er det en annen "Klikk”Funksjon med klasselektoren som refererer til“Vise”Klasse og inni det”Klikk”Funksjon, det er CSS -funksjonen med“skjermblokk”Eiendom med ID -velgeren som refererer til“demo”Id.

Effekten av displayet ingen og visningsblokkegenskaper vil være som følger:

Slik er CSS -visning ingen og visningsblokkegenskaper lagt til ved hjelp av jQuery.

Konklusjon

Vis ingen og visningsblokkegenskaper legges til og endres ved hjelp av jQuery ved å lage to separate CSS -funksjoner i JavaScript, den ene med displayet ingen egenskap og den andre med visningsblokkegenskapen. Disse CSS -funksjonene skal referere til ID eller klasser på knappene som er opprettet i HTML, slik at når brukeren klikker på den aktuelle knappen, påkaller CSS -skjermfunksjonen deretter.