Sabato, 03 Novembre 2018 15:47

Esempio 04 - Interazione con i css

Scritto da

Un simpatico esempio: un blocco colorato con i css e una pulsantiera che lo fa spostare o scomparire/riapparire.

Qui vediamo come JavaScript possa impostare dinamicamente delle proprietà CSS degli oggetti della nostra pagina HTML.

L'esempio è molto semplice ma è fondamentale per capire quali siano le potenzialità di JavaScript, che può modifica in corsa a pagina già caricata i css. Vediamo il codice della pagina html.

<!DOCTYPE html>
<html lang="it">
	<head>
		<title>Esempio 04</title>
		<meta charset="UTF-8">
		<script src="/js/script.js"></script>
		<link href="/css/style.css" rel="stylesheet" type="text/css"> 
	</head>
<body>

<h1>Esercizio in JavaScript: interazione con elementi pagina</h1>

<br><br>
<div id="sprite">Un testo a caso</div>
<br><br>

<form id="muovi" name="muovi">
<input type="button" value="Sinistra" onclick="javascript:Sinistra()">
<input type="button" value="Nascondi" onclick="javascript:Nascondi()">
<input type="button" value="Destra" onclick="Destra()">
</form>

</body>
</html>

Nell'intestazione, come sempre, includiamo lo script che separiamo dal codice html e che inseriamo nel file script.js. Il resto del codice in realtà è minimale con un contenitore div identificato da un id. Il foglio di stile che andiamo ad aggiungere da' una forma, posizione e colore iniziale a tale contenitore.

#sprite 
{
   /*Posizione assoluta dell'oggetto*/	
	position:absolute; /*o relativa ad un altro oggetto*/
	left:10px;
	top:80px;
	width:300px;
	
	/*semplice stile grafico*/
	background:#336699;
	border:1px solid #003366;
	padding:5px;
	color:#FFFFFF;
	
	visibility: "visible"; /*hidden o visible*/
}

Veniamo quindi al codice js che deve rispondere ai tre bottoni della pagina html con altrettante funzioni: una nasconderà la casella, le altre la sposteranno a destra o sinistra. Facciamo uso della funzione getElementById vista nei post precedenti che ci semplifica molto la vita. Per questo esempio introduciamo una funzioncina predefinita js nota come getComputedStyle(), una funziona semplice ma efficace da dover ricordare poiché ci permette di prelevare il valore finale di una proprietà css visibile a schermo, senza strane inizializzazioni o valori nulli. E' vero che una proprietà col suo valore può essere impostata e prelevata bidirezionalmente con var qualcosa = object.style.prorpieta ma non è sempre reattiva ed efficace con alcuni browser, mentre getComputedStyle ci da un valore senza alcun dubbio valido.

function Nascondi()
{
	let sprite = document.getElementById('sprite');
	if (window.getComputedStyle(sprite).visibility == "visible")	
	{
		document.getElementById('sprite').style.visibility = "hidden";
	}
	else
	{
		document.getElementById('sprite').style.visibility = "visible";
	}

}

function Destra()
{
	let sprite = document.getElementById('sprite');
	sprite.style.left = parseInt(window.getComputedStyle(sprite).left)+ 100 + 'px'; //Sposta il div verso destra di 100 pixel alla volta
}

function Sinistra()
{
	let sprite = document.getElementById('sprite');
	sprite.style.left = parseInt(window.getComputedStyle(sprite).left)-100+'px'; //Sposta il div verso destra di un pixel alla volta
}

Alternativa ad esempio per un Sinistra() era questo usando lo stesso percorso DOM per prelevare il valore:

	let sprite = document.getElementById('sprite');
	sprite.style.left = parseInt(sprite.style.left+0)-100+'px'; 

C'è uno 0 che serve ad ingannare la chiamata DOM che, al primo giro di esecuzione/click, non sarebbe in grado di prelevare il valore.Un po' scomodo e non proprio pulita soluzione direi ma comunque efficace. Con la funzione Nascondi() invece si aveva proprio una sorta di bug col primo click a vuoto. 

Letto 385 volte
Prof. Alfredo Centinaro

Docente di "Scienze e tecnologie informatiche", "Tecnologie e progettazione di sistemi informatici", "Sistemi e Reti" presso IIS Alessandrini-Marino (Teramo), consulente e sviluppatore web. Ha collaborato per anni come sviluppatore presso MHT (ora Engineering 365), assistente Sistemi ed elaborazione dell'informazione in UniTE Corso di laurea in Scienze del turismo culturale, tutor presso Telecom Italia Learning Services (L'Aquila)

Joomla SEF URLs by Artio