属性操作

HTML attribute→DOM property

property accessor:属性访问器

属性读操作

属性写操作

属性类型:

通过属性访问符访问的属性,是转换过的实用对象。

属性访问器特点:

通用性 ×-名字异常

扩展性 ×
实用对象√

getAttribute/setAttribute进行属性操作

类型

getAttribute/setAttribute进行属性操作特点

仅字符串 ×
通用性 √

dataset

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。

DOM 对象中有个 dataset 属性对象,可以在该对象中存一些与该 DOM 对象相关的数据。

如上写法是在生成 dom 对象时对 dataset 的一个初始化的动作,dataset 中会存在一个 id 属性、accountName/name/email/mobile 属性。这里需要注意 data-仅仅是一个约定好的前 缀,在生成 DOM 对象时所有已 data-开头的属性会将其去掉前缀 data-后存在 dataset 中。需要注意的是dataset中的属性值只能是字符串,非字符串会转换为字符串后存储,所以要 存对象类型是务必小心。

案例:

当鼠标移入时,显示出卡片信息,如下图:

实现代码:

HTML

CSSJS

results matching ""

    No results matching ""