Element Styles and Positioning

JavaScript Training
Goal Trainers Format
• Lecture
• Exercises
• Ask Questions!
• bitovi/js-training

HTML
<li>
<a href="#Doberman">
Doberman</a>
</li>
JS
var doberman = $('li')[0];
doberman.style.display
document.defaultView
.getComputedStyle(doberman)
.getPropertyValue('display')
//-> 'inline-block'
doberman.style.display = 'none';
How styles are applied
CSS
li {
display: inline-block;
}
//-> ''

Exercise
Add an css method to $ that gets/sets styles:
$('div').css('padding', '20px')
.css('padding-bottom') //-> '20px'
hint:
document.defaultView.getComputedStyle( el )
.getPropertyValue( prop )

<body>
<div>
Hello World
</div>
</body>
div {
height: 100px;
padding: 10px;
border: 2px;
margin: 10px;
}
=
div.offsetTop
div.offsetWidth
div.offsetParent
div.getBoundingClientRect()
DOM Layout and Positioning

Layout
<body>
<div>
Hello World
</div>
</body>
body {
margin: 8px;
}
div {
box-sizing: content-box;
width: 30px; height: 30px;
padding: 4px;
border: solid 4px black;
margin: 10px 3px;
}
Hello WorldHello World
padding
border
margin

Layout
<body>
<div>
Hello World!
I am a sentence.
</div>
</body>
body {
margin: 8px;
}
div {
background-color: green;
margin: 20px 10px;
}
Hello World! I am
a sentence.
<body>
<div>

Layout
<body>
<div>
Hello World!
I am a sentence.
</div>
</body>
body {
margin: 8px;
}
div {
margin: 20px 10px;
}
Hello World! I am
a sentence.
Hello World! I
am a sentence.
<div>
<div>

Layout
<body>
<div>
Hello World!
I am a sentence.
</div>
</body>
body {
margin: 8px;
}
div {
margin: 20px 10px;
}
Hello World! I am
a sentence.
Hello World! I
am a sentence.
<div>
<div>
<body>
<body>

.offsetHeight
.offsetWidth
.clientWidth
.clientHeight
padding

outerWidth()
innerWidth()
width()
padding
outerWidth(true)

Exercise
Add a width method that returns the width of an
element:
$('#breeds').width() //-> 1109
hint:
Use the css() method and don’t forget about padding and borders.

position: relative;
padding
border
margin
offsetTop
offsetLeft
offsetParent
position: relative;
left: 100px;
top: 60px;

position: relative;
position: relative;
left: 100px;
top: 60px;
offsetTop
offsetLeft
offsetParent
offsetParent

position: relative;
left: 100px;
top: 60px;
r = el.getBoundingClientRect()
r.top
r.left

position: relative;
pos.top
pos.left
position: relative;
left: 100px;
top: 60px;
pos = $(el).position()

position: relative;
offset.top
offset.left
position: relative;
left: 100px;
top: 60px;
offset = $(el).offset()

$().offset()
el.getBoundingClientRect()
$().position()
el.offsetLeft
el.offsetTop
window.pageYOffset

offset: function() {
var offset = this[0].getBoundingClientRect();
return {
top: offset.top + window.pageYOffset,
left: offset.left + window.pageXOffset
};
}
offset()
Here we have a offset method that traverses our
offsetParents, calculating our total offset, relative to the
document.

Exercise
Add show and hide methods to $:
$('#breeds').hide();
$('#breeds').show();
hint:
Use your css() method.

Element Styles and Positioning

More Related Content

What's hot

Viewers also liked

Recently uploaded

Element Styles and Positioning

Editor's Notes