使用Dart获取HTML5数据-*属性

Question

HTML5有一个新的data-*

鉴于以下使用情况：

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

如何在Dart中访问这些属性。

Answer 1

Element类包含一个dataset属性，该属性旨在访问(读和写)元素上的数据属性。它会自动在属性名前加上数据，因此不必自己做：

var animalType = listItemElement.dataset['animalType];

重要的是，dataset属性将所有属性名转换为camel-case。如果您有animal-type，则需要访问animalType。

data-前缀在HTML5中是required for custom attributes that should not affect the layout。如果您不使用它，您的文档的验证可能不会成功。