Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting HTML5 data-* attribute with Dart

HTML 5 has a new data attribute data-*

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 could I access these attribute in Dart.

like image 351
st_clair_clarke Avatar asked Jan 04 '14 04:01

st_clair_clarke


1 Answers

The Element class contains a dataset property that is designed to access (read and write) data attributes on element. It automatically prefix your attribute names with data, so you don't have to do it yourself:

var animalType = listItemElement.dataset['animalType];

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

The data- prefix is required for custom attributes that should not affect the layout in HTML5. If you don't use it, validation of your document might not succeed.

like image 62
Fox32 Avatar answered Nov 19 '22 11:11

Fox32