Embed Size (px)
DESCRIPTION
Quinta lezione del modulo Javascript del corso per WebMaster & WebDesigner
Citation preview
Javascript [5]Matteo Magni
Selezionare per classe?
document.getElementsByClassName()
Questo metodo Non tutti lo supportano
getElementsByClassName
Soluzione
• Posso usare l'attributo className
<p class="class-pippo">pippo</p>
<p class="class-pluto">pluto</p>
<p class="class-pippo">pippo</p>
<p class="class-pluto">pluto</p>
<p class="class-pippo">pippo</p>
<script>
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if (p[i].className=='class-pluto') {
alert(p[i].innerHTML);
}
}
A volte quando seleziono un oggetto del DOM lo script non fa nulla?
Esempio: Non va?!?!?!?
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<script>
var x=document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</head>
<body>
<h1 id="myHeader">Click me!</h1>
</body>
</html>
Perchè non va?
Ma l'oggetto c'è?!?!?
Quando lo script viene eseguito l'elemento di id myHeader non è ancora stato inserito nel
DOM.
Eseguire quando?<!doctype html>
<html>
<head>
<title>My Web Page</title>
<script>
//qui non funziona
var x=document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</head>
<body>
<h1 id="myHeader">Click me!</h1>
<script>
var x=document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</body>
</html>
window.onload
window.onload = function ()
{
Javascript code goes here
}
Posso risolvere il problema facendo partire l'esecuzione dello script attraverso l'attributo onload dell'oggetto window.
window.onload [2]
Window.onload viene eseguito quando tutto il contenuto della pagina, tutte i js, tutte le
immagini sono caricate.
Ora funziona
<head>
<meta charset="UTF8">
<title>My Web Page</title>
<script>
window.onload = function () {
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader">Pippo</h1>
<img src="http://images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thumb3648x2736.jpg"/>
</body>
Aspetto che carichi tutto...
Siamo Grafici?
Come gestiamo lo stile di un elemento?
element.style
var div = document.getElementById('div1');
div.style.marginTop = '25px';
var div = document.getElementById('p');
div.style.color = 'red';
Ci viene ritornato un oggetto che “rappresenta” lo stile dell'elemento.
E noi possiamo andare ad agire su tutti i suoi attributi.
Background
• background
• backgroundAttachment
• backgroundColor
• backgroundImage
• backgroundPosition
• backgroundRepeat
Border
• border
• borderBottom
• borderBottomColor
• borderBottomStyle
• borderBottomWidth
• borderColor
• borderLeft
• borderLeftColor
• borderLeftStyle
• borderLeftWidth
• borderRight
• borderRightColor
• borderRightStyle
• borderRightWidth
• borderStyle
• borderTop
• borderTopColor
• borderTopStyle
• borderTopWidth
• borderWidth
Liste
• listStyle
• listStyleImage
• listStylePosition
• listStyleType
Margin e Padding
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
Posizionamento e layout
• bottom
• clear
• clip
• cssFloat
• cursor
• display
• height
• left
• maxHeight
• maxWidth
• minHeight
• minWidth
• overflow
• position
• right
• top
• verticalAlign
• visibility
• width
• zIndex
Font e Testi
• color
• direction
• font
• fontFamily
• fontSize
• fontSizeAdjust
• fontStyle
• fontVariant
• fontWeight
• letterSpacing
• lineHeight
• textAlign
• textDecoration
• textIndent
• textShadow
• textTransform
• unicodeBidi
• whiteSpace
• wordSpacing
Applichiamo un nuovo stile a sosacroniro?
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
