Embed Size (px)
Citation preview
JavaScript Training
Goal Trainers Format
• Lecture• Exercises• Ask Questions!• bitovi/js-training
Styles
HTML
<li><a href="#Doberman">
Doberman</a></li>
JS
var doberman = $('li')[0];doberman.style.displaydocument.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.offsetTopdiv.offsetWidthdiv.offsetParentdiv.getBoundingClientRect()
DOM Layout and Positioning
Slider Demo
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
paddingborder
margin
Layout<body> <div> Hello World! I am a sentence. </div></body>
body { margin: 8px;}
div { box-sizing: content-box; 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 { box-sizing: content-box; background-color: green; 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 { box-sizing: content-box; background-color: green; margin: 20px 10px;}
Hello World! I am a sentence.Hello World! I am a sentence.
<div>
<div>
<body>
<body>
.offsetHeight
.offsetWidth
.clientWidth
.clie
ntH
eigh
t
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;
paddingborder
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.offsetLeftel.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.
