使用Dart获取HTML5 data- *属性

Question

HTML 5有一个新的data attribute 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属性将所有属性名称转换为驼峰大小写。如果您有animal-type，则需要访问animalType。

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