Getting HTML5 Data Attribute with Dart Attribute

Question

HTML 5 has a new data-* attribute

Given the following usage:

  <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> 

How can I access this attribute in Dart.

Answer 1

The Element class contains a dataset property that is used to access (read and write) the data attributes of an element. It automatically prefixes your attribute names with data, so you do not need to do this yourself:

 var animalType = listItemElement.dataset['animalType]; 

The important thing is that the dataset attribute converts all attribute names into a camel case. If you have animal-type , you need to access animalType .

The data- prefix data- required for custom attributes that should not affect layout in HTML5. If you do not use it, checking your document may not work.