Javascript - 5 | WebMaster & WebDesigner

Selezionare per classe?
document.getElementsByClassName()

Questo metodo Non tutti lo supportano

Soluzione
• Posso usare <p class="class-pippo">pippo</p>
l'attributo <p class="class-pluto">pluto</p>
<p class="class-pippo">pippo</p>
className <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>
        <script>
            //qui non funziona
            alert(x.innerHTML);
        </script>
    </head>
    <body>
        <h1 id="myHeader">Click me!</h1>
    <script>
            alert(x.innerHTML);
        </script>
    </body>
</html>

window.onload
window.onload = Posso risolvere il
function () problema facendo
{ partire l'esecuzione
dello script
Javascript code
attraverso l'attributo
goes here
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">
        <script>
        window.onload = function () {
            alert(x.innerHTML);
        }
        </script>
    </head>
    <body>
        <h1 id="myHeader">Pippo</h1>
        <img
src="http://images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thumb
3648x2736.jpg"/>
    </body>

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 • borderRight
• borderBottom • borderRightColor
• borderBottomColor • borderRightStyle
• borderBottomStyle • borderRightWidth
• borderBottomWidth • borderStyle
• borderColor • borderTop
• borderLeft • borderTopColor
• borderLeftColor • borderTopStyle
• borderLeftStyle • borderTopWidth
• borderLeftWidth • borderWidth

Liste
• listStyle
• listStyleImage
• listStylePosition
• listStyleType

Margin e Padding
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop

Posizionamento e layout
bottom • minHeight
•
clear • minWidth
•
clip • overflow
•
cssFloat • position
•
cursor • right
•
display • top
•
height • verticalAlign
•
left • visibility
•
maxHeight • width
•
maxWidth • zIndex
•

Font e Testi
• color • letterSpacing
• direction • lineHeight
font • textAlign
•
• textDecoration
• fontFamily
• textIndent
• fontSize
• textShadow
• fontSizeAdjust textTransform
•
• fontStyle • unicodeBidi
• fontVariant • whiteSpace
• fontWeight • wordSpacing

Applichiamo un nuovo stile a sosacroniro?

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

Javascript - 5 | WebMaster & WebDesigner

Recommended

Recommended

More Related Content

Similar to Javascript - 5 | WebMaster & WebDesigner

Similar to Javascript - 5 | WebMaster & WebDesigner (14)

More from Matteo Magni

More from Matteo Magni (20)

Javascript - 5 | WebMaster & WebDesigner