HTML 全局属性

进行 HTML 开发时，我们经常会使用一些属性，这些属性有不同的生效范围。

比如的 value 和 placeholder，碰到 input 时能有实际效果，但放在普通 div 上面则没有任何意义。

而像 class、id、style 等属性，确是可以对所有属性生效，像这种对所有 HTML 标签生效的属性，在 HTML 中称为 全局属性。

详细可查看文档：MDN Web 文档 - HTML 全局属性。

这里记录几个有用到的全局属性。

自定义数据属性 data-*

这个属性经常在各大网站中见到，但之前没有注意过，现在才发现，还真是很方便有用的功能。

data-* 文档

自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问，HTMLElement.dataset 属性可以访问和赋值它们。

该名称不能以 xml 开头，无论这些字母是大写还是小写；
该名称不能包含任何分号 (U+003A)；
该名称不能包含A至Z的大写字母。

注意，HTMLElement.dataset 属性是一个DOMStringMap，并且自定义数据属性 data-test-value 可以通过 HTMLElement.dataset.testValue ( 或者是 HTMLElement.dataset["testValue"] ) 来访问，任何破折号(U+002D) 都会被下个字母的大写替代(驼峰拼写)。

html 复制代码

<!DOCTYPE html>
<body>
  <div data-name="小明" data-age-date="10月">一个人</div>
</body>
<script>
  // 获取 dom
  let divDom = document.querySelector('div')

  let dataset = divDom.dataset

  // 直接取值
  console.log(dataset.name) // 小明

  // 注意，多个 - 串联的属性名，形成的 key 自动转为驼峰命名
  console.log(dataset.ageDate) // 10月

  console.log(dataset) // {name: "小明", ageDate: "10月"}

  // 可以赋值，注意赋值后，dom 中的 data-age-date 属性也会同步修改，相当于操作 dom 了
  dataset.ageDate = '12月'

  // 再次打印，是新值了
  console.log(dataset) // {name: "小明", ageDate: "12月"}
</script>

更新时间：2023/03/04 19:29:12

本页目录