The document discusses HTML data attributes, which allow storing additional information on HTML elements. Data attributes use a data- prefix and are accessed via JavaScript's dataset property or getAttribute/setAttribute methods. They can store initial values, sizes, or other data that may be needed for JavaScript or to change CSS styles conditionally. Examples show how to define data attributes in HTML tags and retrieve/update their values from JavaScript.

1. HTML
Data attributes
by yz
<div
id="following_list",
class=“list”>
//code
</div>
14年6月6日金曜日

2. HTML
Data attributes
by yz
14年6月6日金曜日

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日金曜日

18. How to use it
• in CSS
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日金曜日