Come fare un diviebile con JavaScript

Come fare un diviebile con JavaScript
IL L'elemento è il tag più importante e comunemente usato nello sviluppo web. Definisce una sezione o una divisione in un documento HTML. Inoltre, gli utenti possono modificare le diverse proprietà di styling su tag come colore di sfondo, dimensione del font, colore del testo, e qualsiasi funzionalità che può essere applicata facendo clic sul div. Si può aggiungere una funzionalità specifica dopo aver fatto clic sul div. In questo post, dimostreremo diversi metodi per rendere un diviebile utilizzando JavaScript.
  • Come rendere un div
  • Esempio 1: utilizzando il metodo addEventListener () per rendere un diviebile
  • Esempio 2: Utilizzo del tag per rendere un URL cliccabile

Come rendere un div?

JavaScript fornisce addEventListener () metodo per creare un testo cliccabile all'interno etichetta. Inoltre, una semplice funzione può anche essere associata alla funzionalità OnClick del tag DIV per rendere cliccabile un div. L'operazione cliccabile può essere applicata accedendo al id O classe attributo. Gli utenti possono collocare qualsiasi contenuto all'interno di un file tag da visualizzare nel browser. Proviamo entrambi i metodi per rendere un diviebile in javascript.

Esempio 1: utilizzando il metodo addEventListener () per rendere un diviebile

Il metodo addEventListener () viene applicato tramite il Tag per fare un diviebile in javascript. Il metodo è attivato da un'associazione con un evento particolare. Considerandolo, un codice è seguito con Tag per creare un testo cliccabile in JavaScript.

Codice



Esempio di cliccabile in JavaScript


Premere il div cliccabile



Il codice è illustrato di seguito:

  • In primo luogo, a L'area è specificata in cui contiene un messaggio "Premere il div cliccabile" Avere un ID univoco di "CL".
  • Dopodiché, il getElementById () Il metodo viene utilizzato per estrarre l'HTML elemento dal suo "CL" valore.
  • Inoltre, il addEventListener () Il metodo viene utilizzato per aggiungere un gestore di eventi passando "clic" E "Cl_div" argomenti.
  • Alla fine, a cl_div () il metodo si chiama che restituisce un messaggio "Benvenuti in JavaScript" impiegando il Innerhtml proprietà.

Produzione

L'output restituisce il browser in cui l'utente clic sul div e sul div Il tag viene modificato in "Benvenuti in JavaScript".

Esempio 2: Utilizzo del tag per rendere un URL cliccabile in un div

IL Il tag è famoso per il reindirizzamento ad altri collegamenti o pagine Web. Questo tag ha un "Href"Attributo che accetta l'URL di una pagina web specifica. Pratichiamo di usarlo tramite il seguente codice di esempio:

Codice


Esempio per rendere un div


"https: // linuxhint.com/"

Il codice sopra è spiegato riga per riga:

  • Innanzitutto, a l'area è specificata e assegnata un valore di classe di "cliccabile".
  • Dopodiché a Il tag viene applicato passando il collegamento “https: // linuxhint.com ".
  • Premendo il collegamento, si riferisce al div Avere la classe "cliccabile".
  • Dopodiché, il finestra.posizione() Il metodo ottiene il "URL" della pagina web specificata attraverso il attr () metodo.

Produzione

L'output mostra che quando un utente preme il collegamento "Fare clic sul collegamento", Una nuova finestra si presenta nel browser.

Conclusione

In JavaScript, un integrato addEventListener () Il metodo o una funzione definita dall'utente possono essere utilizzati per rendere cliccabile. IL addEventListener () Il metodo prende due argomenti, il primo argomento deve essere 'clic'E il secondo argomento deve indicare il div (utilizzando il suo classe nome o id). In una funzione definita dall'utente, la funzione è collegata all'evento OnClick del div Per rendere il Div cliccabile. Questo blog ha dimostrato tutti i metodi possibili per rendere un diviebile utilizzando JavaScript.