3. HTML
Data attributes
by yz
<div
id="following_list",
class=“list”
data-‐list-‐size
=
“10”
data-‐column
=
“2”>
//code
</div>
14年6月6日金曜日
4. What it is
• HTML5 syntax to store information on
HTML elements
14年6月6日金曜日
5. What the syntax looks like
in HTML tag
data-something = “anything”
14年6月6日金曜日
6. What the syntax looks like
in HTML tag
data-something = “anything”
14年6月6日金曜日
7. What the syntax looks like
in HTML tag
data-something = “anything”
all-lowercase
14年6月6日金曜日
8. What the syntax looks like
in HTML tag
data-something = “anything”
all-lowercase
the attribute value can be any string
14年6月6日金曜日
9. What it is used for
• to store the initial value of an element
ex.) height, opacity, the size of the list
14年6月6日金曜日
10. What it is used for
• to store the initial value of an element
ex.) height, opacity, the size of the list
... which might be required in later JavaScript
animation calculations etc.
14年6月6日金曜日
11. What it is used for
• to store the initial value of an element
ex.) height, opacity, the size of the list
... which might be required in later JavaScript
animation calculations etc.
<div id= “follow_list” data-list-size = ’10’> <div>
14年6月6日金曜日
12. How to use it
• in JavaScript
// Getting all the data-attributes using dataset
14年6月6日金曜日
13. How to use it
• in JavaScript
// Getting all the data-attributes using dataset
14年6月6日金曜日
14. How to use it
• in JavaScript
// Getting all the data-attributes using dataset
14年6月6日金曜日
15. How to use it
• in JavaScript
// 'Getting' data-attributes using getAttribute
// 'Setting' data-attributes using setAttribute
<div id='strawberry-plant' data-fruit='12'></div>
14年6月6日金曜日
16. How to use it
• in JavaScript
// 'Getting' data-attributes using getAttribute
// 'Setting' data-attributes using setAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit');
// fruitCount = '12'
<div id='strawberry-plant' data-fruit='12'></div>
14年6月6日金曜日
17. How to use it
• in JavaScript
// 'Getting' data-attributes using getAttribute
// 'Setting' data-attributes using setAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit');
// fruitCount = '12'
plant.setAttribute('data-fruit','7');
<div id='strawberry-plant' data-fruit='12'></div>
14年6月6日金曜日
19. How to use it
• in CSS
change styles
according to data!
14年6月6日金曜日
20. Summary
• When your JavaScript/CSS code is messed up with
HTML classes, use data attributes!
• Just insert data-something = “anything” in your
HTML tag!
• JavaScript -
• CSS -
• I will post this presentation on Google + community :)
• links: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
http://html5doctor.com/html5-custom-data-attributes/
14年6月6日金曜日
21. Summary
• When your JavaScript/CSS code is messed up with
HTML classes, use data attributes!
• Just insert data-something = “anything” in your
HTML tag!
• JavaScript -
• CSS -
• I will post this presentation on Google + community :)
• links: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
http://html5doctor.com/html5-custom-data-attributes/
dataset, getAttributes, setAttributes
14年6月6日金曜日
22. Summary
• When your JavaScript/CSS code is messed up with
HTML classes, use data attributes!
• Just insert data-something = “anything” in your
HTML tag!
• JavaScript -
• CSS -
• I will post this presentation on Google + community :)
• links: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
http://html5doctor.com/html5-custom-data-attributes/
dataset, getAttributes, setAttributes
tagname[data-x = “y”]
14年6月6日金曜日
