JavaScript e CSS. Pasqualetti Veronica

Transcript

1 JavaScript e CSS 1 Pasqualetti Veronica

2 CSS Cascading Style Sheets Linguaggio per modificare lo stile delle pagine web I fogli di stile (CSS): Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare il contenuto t di un documento da aspetti legati alla sua presentazione Possiamo dimenticare alcuni tag e attributi HTML 2

3 CSS Vantaggi Permettono di modificare il look & feel di un documento in modo efficiente Lo stesso stile può essere applicato a più documenti Il sorgente HTML è più pulito Si possono progettare pagine HTML per più browser Il Consorzio per la standardizzazione del linguaggi gg per il web (W3C) suggerisce di usare i CSS perché facilitano la progettazione e la modifica delle pagine HTML 3

4 CSS: blocchi Ogni documento HTML può essere visto come un insieme di blocchi (contenitori) sui quali si può agire con stili diversi I tag HTML definiscono i i blocchi Per ogni blocco si può specificare uno stile che ne descrive l aspetto 4

5 CSS: regole Un foglio di stile è una collezione di regole stilistiche che definiscono il look degli elementi Ogni regola è costituita da un selettore cui è associato un elenco di proprietà. Ad ogni proprietà si associa un valore selector { property1 : value1; property2 p : value2; propertyn : valuen; } 5

6 CSS: regole - esempio Un selettore può essere un tag HTML 6 h1 { color:#dd5500; font-family:arial; } p { } margin-top:50; color:blue; font-style:italic;

7 CSS: dove si scrivono? Le regole stilistiche possono essere scritte nella parte <head> usando il tag <style> <style type="text/css > regole per definire gli stili </style> <style> può anche essere usato come attributo di altri tag HTML <h1 style="color:red; text-transform:capitalize; > Prova CSS per h1 </h1> Il metodo migliore è quello di scrivere gli attributi di stile in un file esterno, che può essere condiviso da più file HTML. Il file che contiene gli stili deve essere un con estensione.css <head><link rel="stylesheet type="text/css href="stile.css ></head> 7

8 CSS e Javascript Una delle caratteristiche più utili di Javascript, e del DOM in particolare, è la possibilità di aggiungere e modificare stili CSS degli elementi di pagina E possibile aggiungere e/o modificare singole dichiarazioni CSS grazie alla proprietà style di ogni elemento DOM. esempio: var el=document.getelementbyid("bigtext"); el.style.fontsize="50px"; 8

9 CSS e Javascript: regole generali accedere alle proprietà CSS Per le proprietà CSS composte da una singola parola, l'equivalente Javascript è la proprietà stessa, mentre per le proprietà separate da un trattino, questo sparirà e trasformerà in maiuscola la lettera successiva (per esempio border-width diventa borderwidth) esempio: var el=document.getelementbyid( contorno"); tel tb t el.style.borderwidth= 10px"; 9

10 CSS e Javascript: regole generali accedere alle proprietà CSS (2) 10 float è una parola riservata in JavaScript: gli equivalenti saranno quindi cssfloat per browser quali Opera, Mozilla e Safari, e stylefloat per Internet Explorer. Basterà impostarle entrambe per ottenere il risultato voluto in maniera cross-browser: var el=document.getelementbyid("box"); el.style.stylefloat="left"; l t l t el.style.cssfloat="left";

11 CSS e Javascript: modificare lo style HTML E anche possibile intervenire sull'attributo HTML style degli elementi di pagina, proprio come se si impostasse uno stile in linea, attraverso il metodo setattribute var str = "float:right;width:10em;border:1px dotted #CCC;padding:5px ; var divs = document.getelementsbytagname("div"); for(i=0;i<divs.length;i++){ i i if(divs[i].classname== miodiv") divs.style.setattribute( style setattribute("csstext",str); } 11

12 CSS e javascript: modificare tramite le classi La proprietà classname consente di accedere sia in lettura che in scrittura alle classi CSS attribuite sia nel codice che da Javascript stesso. Possiamo attribuire la classe "open" all'elemento con id="menu": var el=document.getelementbyid("menu"); el.classname="open"; 12 In questo modo si perderà l'informazione di altre eventuali classi assegnate all'elemento con id=menu. Una soluzione è accodare la classe: var el=document.getelementbyid("menu"); el.classname+=" l open";

13 Lettura di valori CSS da Javascript Attraverso la proprietà style degli elementi DOM è possibile accedere a proprietà CSS in Javascript 13 Mettiamo nella variabile color il colore di sfondo del div id="content t var el=document.getelementbyid("content"); var color=el.style.backgroundcolor; l l l PROBLEMA: la variabile color conterrà effettivamente un valore non nullo solo se la proprietà CSS è stata in precedenza impostata mediante Javascript.

14 Lettura di valori CSS da Javascript: soluzione 14 PROBLEMA: leggiamo un valore non nullo solo se la proprietà CSS è stata in precedenza impostata mediante Javascript. SOLUZIONE: il metodo document.defaultview.getcomputedstyle del DOM consente di accedere a valori CSS non precedentemente impostati mediante Javascript. Una piccola differenza con Internet Explorer, che dispone invece del metodo proprietario p currentstyle

15 Esempio soluzione lettura CSS function getstyleprop(x,prop){ if(x.currentstyle) return(x.currentstyle[prop]); if(document.defaultview.getcomputedstyle) return(document.defaultview.getcomputedstyle(x,'')[ ( prop]); return(null); } Altri problemi: spesso i valori restituiti dalla funzione sono differenti a seconda del browser. Per esempio, per ciò che riguarda i colori di sfondo e del testo in Internet Explorer questi vengono restituiti in formato esadecimale, in Opera e Firefox/Mozilla in rgb, etc. 15

16 Esempio 1 di interazione CSS e JavaScript 16 In questa pagina è possibile modificare lo stile di visualizzazione selezionando dalla tendina. Il codice è consultabile nell esempio esempio 7.

17 Riferimenti JavaScript (tutorial ed esempi) com/ (documentazione e script) 17 (esempi e script) p// p g/p g /j avascript/ (appunti ed esempi)