Come cambiare un attributo CSS tramite JavaScript

tramite: O2O
Difficoltà: media
17

Introduzione

In ambito informatico sono esistiti - ed esistono tutt'ora - molti linguaggi di programmazione per il web. Sebbene nessuno di essi sia davvero facile da apprendere, alcuni sono più intuitivi di altri e si prestano meglio allo sviluppo di contenuti interattivi ed effetti dinamici per la rete. Javascript è uno di questi, forse il più noto ed utilizzato. Con Javascript è possibile servirsi del linguaggio CSS per la formattazione dei documenti: questo acronimo sta per "fogli di stile" e l'uso dei suoi codici permette agli autori di siti web di plasmare a proprio piacimento l'aspetto delle pagine. Se avete già qualche conoscenza in questo campo, comprendere tramite questa guida come cambiare un attributo CSS via Javascript sarà molto semplice.

27

Occorrente

  • Conoscenza dei linguaggi (HTML, Javascript, CSS)
37

Innanzitutto, se volessimo eseguire questa stessa operazione tramite script Java, è possibile farlo tramite una funzione standard che permette di interagire con gli attributi di ogni elemento. Ricollegandoci all'esempio precedente, le linee di codice sarebbero come di seguito: my_element = document. GetElementById ("elemento_base");
my_element. SetAttribute ("class","classe_base"); Tuttavia questo codice potrebbe non funzionare in browser che utilizzano attributi diversi da "class" per le modifiche, come nel caso di Internet Explorer che interviene con "classname". Pertanto sarà abbastanza apportare una modifica semplice al nostro codice, in questo modo:
my_element = document. GetElementById ("elemento_base");
if (is IE)
{
my_element. SetAttribute ("classname","classe_base");
}
else
{
my_element. SetAttribute ("class","classe_base");
}

Queste sono funzioni basilari per la modifica degli attributi e tornano utili in qualsiasi circostanza. Tuttavia è importante avere conoscenze più profonde del codice HTML e Javascript perché vi garantiranno molti più margini di manovra, permettendovi di sviluppare liberamente l'aspetto delle pagine.

47

Se il vostro desiderio è quello di creare degli effetti dinamici, modificare il loro comportamento nel momento in cui un visitatore interagisce con essi o concedere ai visitatori la possibilità di scegliere un tema grafico diverso, dovrete utilizzare funzioni di Javascript che provocheranno un'alterazione nelle proprietà di stile CSS a seguito dell'interazione con l'elemento dinamico. La tecnica principale per questo compito consiste nell'alterare i nomi degli attributi di classe CSS, un metodo che possono adottare anche gli aspiranti programmatori alle prime armi. Vediamo come lavorare sull'attributo "class" in base alle circostanze.

Continua la lettura
57

Infine, intervenire sul codice HTML sarà spesso necessario se siete programmatori o meditate di diventarlo, poiché il comportamento dei vari browser può cambiare in maniera significativa anche durante operazioni banali. Per assicurarvi di non avere problemi in base al browser utilizzato, impostate la classe di un elemento con l'attributo "class" come nell'esempio seguente: Esempio di prova. Tutti i browser potranno così riconoscere la classe senza problemi.

67

Guarda il video

77

Consigli

Non dimenticare mai:
  • Approfondite le vostre conoscenze in linguaggi di programmazione.
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come realizzare animazioni con JavaScript

Tra i linguaggi di scripting esistenti Javascrispt è quello tutt'oggi utilizzato anche se superato da altri più moderni. Questo linguaggio si basa su una sintassi Java, ma esso è reso più semplice e diretto in quanto svolge il codice script riga dopo...
Programmazione

Come utilizzare il ciclo for in di JavaScript

Uno degli elementi più importanti della programmazione sono i cicli, detti anche strutture iterative. Grazie alle strutture iterative, abbiamo la possibilità con poche righe di codice programmato, di eseguire un numero praticamente infinito di istruzioni,...
Programmazione

Come validare un form con JavaScript

Al fine di rendere più interessante ed accattivante un sito, colui che si occupa della sua realizzazione, deve essere capace di rendere la pagina web il più interattiva possibile in modo che, l'utente possa "interagire" con i suoi contenuti. Uno dei...
Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte allo stile delle tue pagine web? Leggi questa guida e scopri come farlo usando jQuery Custom Scrollbar....
Programmazione

Come generare numeri casuali in Javascript

Javascript è comunemente utilizzato per la programmazione Web, per la creazione di siti internet e applicazioni web, e ha la caratteristica di poter generare degli effetti interattivi, dinamici ad impatto, molto accattivanti, in qualsiasi pagina web...
Programmazione

Come iniziare a programmare ed usare Javascript

"Javascript" rappresenta il linguaggio di scripting client-side maggiormente impiegato a livello mondiale. Inizialmente venne sviluppato dalla "Sun Microsystems" e in seguito diventò una raccomandazione standard internazionale famosa come "ECMAScript"....
Programmazione

Gli errori più comuni su CSS

Il linguaggio CSS (Cascading Style Sheets) si usa essenzialmente per la creazione di un sito web. Insieme all'HTML e al Javascript, formano una pagina web in tutto e per tutto. Il CSS, in particolare, si occupa di tutti quegli aspetti che vanno a comporre...
Programmazione

Come utilizzare CSS3

Ora è d'obbligo avere una conoscenza dei termini per poter usare il nostro computer in maniera adeguata, necessario ed utile per essere pronti ed al passo con i tempi, i vocaboli sono tanti alcune volte è difficile capirne il significato anche perché...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.