docJavaScript e CSS
download 
Reclamo Transcript
JavaScript e CSS
JavaScript e CSS
1
Pasqualetti Veronica
CSS
C
Cascading
di Style
St l Sheets
Sh t
2
Linguaggio per modificare lo stile delle pagine
web
I fogli di stile (CSS):
Servono per facilitare
S
f ili
lla creazione
i
di pagine
i HTML con un
aspetto uniforme
P
Permettono
tt
di separare il contenuto
t
t di un d
documento
t d
da
aspetti legati alla sua presentazione
Possiamo “dimenticare”
dimenticare alcuni tag e attributi HTML
CSS
3
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
i HTML per più
iù b
browser
Il Consorzio p
per la standardizzazione del linguaggi
g gg
per il web (W3C) suggerisce di usare i CSS perché
facilitano la progettazione e la modifica delle pagine
HTML
CSS: blocchi
4
Ogni documento HTML può essere visto come un
insieme di blocchi (contenitori) sui quali si
può agire con stili diversi
I tag
t HTML definiscono
d fi i
i blocchi
bl hi
Per ogni blocco si può specificare uno stile che ne
descrive l’aspetto
CSS: regole
5
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
p y : value2;;
…
propertyN : valueN;
}
CSS: regole - esempio
6
Un selettore può essere un tag HTML
h1 { color:#dd5500; font-family:Arial; }
p{
margin top:50;
margin-top:50;
color:blue;
font-style:italic;
}
CSS: dove si scrivono?
7
Le
L regole
l stilistiche
tili ti h possono essere scritte
itt nella
ll parte
t
<head> usando il tag <style>
<style
y type="text/css“>
yp
/
regole per definire gli stili
</style>
<style> può anche essere usato come attributo di altri tag
HTML
<h1 style="color:red; text-transform:capitalize;“>
P
Prova
CSS per h
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
css
<head><link rel="stylesheet” type="text/css”
href="stile.css”></head>
CSS e Javascript
8
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
ibil aggiungere
i
e/o
/ modificare
difi
singole
i
l
dichiarazioni CSS grazie alla proprietà style di ogni
elemento
l
DOM
DOM.
esempio:
var el=document.getElementById("bigtext");
y
5 p ;
el.style.fontSize="50px";
CSS e Javascript: regole generali
accedere
d
alle
ll proprietà
i tà CSS
9
Per le proprietà CSS composte da una singola parola,
l equivalente Javascript è la proprietà stessa, mentre
l'equivalente
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");
l d
t tEl
tB Id(“
t
")
el.style.borderWidth=“10px";
CSS e Javascript: regole generali
accedere
d
alle
ll proprietà
i tà 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.
Explorer
Basterà impostarle entrambe per ottenere il risultato
voluto in maniera cross-browser:
cross browser:
var el=document.getElementById("box");
el.style.styleFloat="left";
l t l t l Fl t "l ft"
el.style.cssFloat="left";
CSS e Javascript:
modificare
difi
lo
l style
t l HTML
11
E’ anche possibile intervenire sull'attributo HTML style
degli elementi di pagina, proprio come se si impostasse
uno stile in linea,
linea attraverso il metodo setAttribute
var str = "float:right;width:10em;border:1px
float:right;width:10em;border:1px dotted
#CCC;padding:5px“;
var divs = document.getElementsByTagName("div");
f (i
for(i=0;i<divs.length;i++){
i di l
h i ){
if(divs[i].className==“miodiv")
divs style setAttribute("cssText"
divs.style.setAttribute(
cssText ,str);
str);
}
CSS e javascript:
modificare
difi
ttramite
it lle classi
l i
12
La proprietà className consente di accedere sia in
lettura che in scrittura alle classi CSS attribuite sia nel
codice che da Javascript stesso.
stesso
Possiamo attribuire la classe "open" all'elemento con
id= menu :
id="menu":
var el=document.getElementById("menu");
el.className="open";
In questo modo si perderà l'informazione di altre
eventuali classi assegnate all
all'elemento
elemento con id=menu.
id=menu Una
soluzione è accodare la classe:
var el=document.getElementById("menu");
el.className+="
l l N
" open";
"
Lettura di valori CSS da Javascript
13
Attraverso la proprietà style degli elementi DOM è
possibile accedere a proprietà CSS in Javascript
Mettiamo nella variabile color il colore di sfondo del
di id="content“
div
id "
t t“
var el=document.getElementById("content");
var color=el.style.backgroundColor;
l
l
l b k
dC l
PROBLEMA: la variabile color conterrà
effettivamente un valore non nullo solo se la
proprietà CSS è stata in precedenza impostata
mediante Javascript.
Lettura di valori CSS da Javascript:
p soluzione
14
PROBLEMA: leggiamo un valore non nullo solo se la
proprietà CSS è stata in precedenza impostata
mediante Javascript.
SOLUZIONE:
SOLUZIONE il metodo
t d
document.defaultView.getComputedStyle del
DOM consente di accedere
d
a valori
l i CSS non
precedentemente impostati mediante Javascript.
Una piccola differenza con Internet Explorer, che
p
invece del metodo p
proprietario
p
dispone
currentStyle
Esempio soluzione lettura CSS
15
function getStyleProp(x,prop){
if(x.currentStyle)
return(x currentStyle[prop]);
return(x.currentStyle[prop]);
if(document.defaultView.getComputedStyle)
(
g
p
y ( , )[
return(document.defaultView.getComputedStyle(x,'')[
prop]);
return(null);
}
Altri problemi: spesso i valori restituiti dalla funzione
sono differenti a seconda del browser
browser. Per esempio
esempio, per
ciò che riguarda i colori di sfondo e del testo in Internet
p
q
questi vengono
g
restituiti in formato
Explorer
esadecimale, in Opera e Firefox/Mozilla in rgb, etc.
Esempio 1 di interazione
CSS e JavaScript
J
S i t
16
In q
questa pagina
p g
èp
possibile modificare lo stile di
visualizzazione selezionando dalla tendina.
Il codice è consultabile nell
nell’esempio
esempio 7.
Riferimenti JavaScript
17
http://javascript.html.it/ (tutorial ed esempi)
http://www.javascript.com/
http://www javascript com/ (documentazione e
script)
http://www.javascriptsource.com/
h
(esempi e script)
http://www.webmasterpoint.org/programmazione/j
p //
p
g/p g
/j
avascript/ (appunti ed esempi)
