Come ottenere, impostare e modificare le proprietà di un elemento con jQuery
Dopo la lettura di questo post, sarai in grado di recuperare le proprietà di un elemento, modificarle e inserirne delle nuove. Entrando più nello specifico, avrai una visione molto generale della funzione .css() di jQuery.
Attenzione!
Per utilizzare le funzioni jQuery occorre prima importare la libreria. Esistono diverse versioni e le puoi trovare qui: https://code.jquery.com/jquery/
Nel mio esempio, volendo importare la versione minified di jQuery Core 3.2.1, all'interno della pagina avremo:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
1. Creazione di un elemento
In questo step, viene creato un elemento che servirà come esempio per le spiegazioni successive.
<div id="example"></div>
E' stato creato un div con ID example. A questo elemento gli sono stati associate le seguenti proprietà:
#example {
float: left;
width: 150px;
height: 100px;
background: #000000;
}
2. Ottenere le proprietà di un elemento
In generale, per ottenere, recuperare ed eventualmente modificare le proprietà di un elemento può essere utilizzato il metodo jQuery .css().
Come fare per ottenere una proprietà di un elemento specifico?
Per recuperare il valore dell'attributo width dell'elemento con ID example:
$('#example').css('width');
Per stamparlo a schermo con un Alert, puoi creare un apposito link:
<a href="javascript:void(0);" onclick="alert($('#example').css('width'));">Stampa Width</a>
3. Settare e modificare proprietà
Come è possibile recuperare proprietà già impostate, il metodo .css() consente anche di settarle ed eventualmente di modificarle.
Prendendo in esame l'esempio in alto relativo al div con ID example, volendo modificare la lunghezza, avremo:
$('#example').css('width', '200px');
Anche in questo caso, se si vuole visualizzare questa modifica in tempo reale, consiglio la creazione di un link:
<a href="javascript:void(0);" onclick="$('#example').css('width', '200px');">Setta nuovo Width</a>
Riferendoci in questo caso ad un attributo come width, è possibile gestire il suo valore non impostandone uno nuovo ma aumentandone/diminuendone quello esistente:
$('#example').css('width', '+=100px');
<a href="javascript:void(0);" onclick="$('#example').css('width', '+=100px');">Aumenta Width</a>
Nello stesso modo, è possibile aggiungere nuove proprietà. Per esempio, volendo aggiungere un bordo rosso di grandezza 2px al nostro div :
$('#example').css('border', '2px solid red');
<a href="javascript:void(0);" onclick="$('#example').css('border', '2px solid red');">Aggiungi bordo</a>
Ti sei perso le mini guide precedenti?
