16 Ago 2016

Query Selector

Possiamo catturare degli elementi e poi applicare degli stili css. Ecco un esempio di pagina

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>

<p>Testo senza formattazione</p>

<button type="button" onclick="cambiaStile();">Cambia stile</button>

<script>

function cambiaStile(){

   var x=document.querySelector('p').style.textAlign='center';

}

</script>

</body>
</html>

Abbiamo creato un solo paragrafo e un bottone che all'evento click associa la nostra funzione cambiaStile. Questa funzione cattura il paragrafo in questione tramite il metodo queryselector che tra parentesi accetta come parametro il nome del selettore css, che sarebbe poi l'elemento su cui applichiamo le proprietà css.Poi assegniamo il metodo style che accetta la proprietà css ed il nuovo valore. Con il metodo style possiamo applicare le proprietà css che conosciamo. In questo caso allineiamo il testo a centro quando clicchiamo sul bottone. Ecco un altro esempio:

 <script>

function cambiaClasse(){

   var x=document.querySelector('p').style.color = 'red';

}

</script>

In pratica applichiamo la regola css che cambia il colore del testo. Oppure:

<script>

function cambiaClasse(){

   var x=document.querySelector('p').style.textDecoration='underline';

}
</script>

Qui invece applichiamo la regola text-decoration del css che ci permette di applicare una decorazione al testo che può essere overline(sopra-lineato), underline(sottolineato),line-trough(sbarrato). Oppure cambiamo la grandezza del testo:

<script>

function cambiaClasse(){

   var x=document.querySelector('p').style.fontSize="25px";
}
</script>
Scritto da 
Pubblicato in Javascript
Letto 185 volte
Vota questo articolo
(0 Voti)

NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo