Come posso cambiare la visualizzazione CSS nessuna o bloccare la proprietà usando jQuery

La funzione JavaScript o JQuery con display nessuno e le proprietà del blocco di visualizzazione vengono utilizzate per nascondere e visualizzare il contenuto rispettivamente. Dovrebbero essere visualizzati i pulsanti sull'interfaccia creata con i tag HTML e le funzioni JavaScript che si riferiscono a tali pulsanti in modo che il display non viene visualizzato la funzione di blocco di visualizzazione quando l'utente fa clic sul rispettivo pulsante.

Creazione di pulsanti che possiedono proprietà "Visualizza nessuno" e "Blocco di visualizzazione"

I tag dei pulsanti vengono utilizzati per creare pulsanti in HTML e la jQuery (libreria JavaScript) viene quindi utilizzata per aggiungere funzionalità ai pulsanti.

Esempio: visualizzare nessuno e il blocco di visualizzazione per un contenitore
Discutiamolo con un semplice esempio per nascondere e visualizzare un contenitore Div usando "visualizzare nessuno" E "blocco di visualizzazione" proprietà:

Nascondere
Schermo

Contenitore div

Nel frammento di codice sopra, ci sono tag per creare pulsanti e un contenitore Div:

• C'è il tag pulsante con "pulsante"Dichiarato come il suo tipo. All'interno del tag del pulsante di apertura è il "nascondere"Classe creata e tra i tag del pulsante di apertura e chiusura è il testo che verrà visualizzato sul pulsante.
• Allo stesso modo, c'è un altro tag pulsante con la seconda classe chiamata spettacolo, e il testo da visualizzare sul pulsante è "Schermo".
• Quindi, c'è il tag DIV con l'ID chiamato "Demo,"E quindi il testo deve essere visualizzato sul contenitore div, i.e., "Contenitore div".

Nell'elemento di script o in un file JavaScript separato, dovrebbero esserci funzioni con visualizzare nessuna e visualizzare le proprietà del blocco:

$ (documento).ready (function ()
$ (".nascondere").Click (function ()
$ ("#demo").CSS ("display", "Nessuno");
);
$ (".spettacolo").Click (function ()
$ ("#demo").css ("display", "blocco");
);
);

Nel frammento di codice sopra, ci sono le funzioni JavaScript aggiunte per creare la funzionalità per i pulsanti:

• C'è il "pronto"Funzione che esegue la funzione al suo interno quando il documento HTML o la pagina Web vengono caricati sul browser.
• All'interno del principale "pronto"Funzione, c'è il"clic"Funzione che si riferisce al"nascondere"Classe (la classe che è stata creata per il pulsante Hide. All'interno di questa funzione, c'è la funzione CSS con "visualizzare nessuno"Proprietà che si riferisce al"Demo" id. Ciò significa che quando l'utente fa clic su "nasconderePulsante ", il"visualizzare nessuno"La proprietà verrà eseguita.
• Allo stesso modo, ce n'è un altro "clic"Funzione con il selettore di classe che si riferisce a"Schermo”Classe e all'interno di quella"clic"Funzione, esiste la funzione CSS con il"blocco di visualizzazione"Proprietà con il selettore ID che si riferisce al"Demo" id.

L'impatto del display nessuno e le proprietà del blocco del display saranno le seguenti:

Ecco come vengono aggiunti le proprietà del blocco CSS nessuno e il display.

Conclusione

Visualizza nessuna e le proprietà del blocco di visualizzazione vengono aggiunte e modificate utilizzando jQuery creando due funzioni CSS separate in JavaScript, una con la proprietà display nessuno e l'altra con la proprietà del blocco di visualizzazione. Queste funzioni CSS dovrebbero fare riferimento all'ID o alle classi dei pulsanti creati in HTML in modo che quando l'utente fa clic sul pulsante pertinente, la funzione di visualizzazione CSS invoca di conseguenza.