HTML 全局属性
title: HTML 全局属性 id: ab671cd0c0e087cd67c6bc246be9fd5a tags: [] date: 2000/01/01 00:00:00 updated: 2023/03/04 19:29:12 isPublic: true --#|[分隔]|#--
HTML 全局属性
进行 HTML 开发时，我们经常会使用一些属性，这些属性有不同的生效范围。
比如的 value 和 placeholder，碰到 input 时能有实际效果，但放在普通 div 上面则没有任何意义。
而像 class、id、style 等属性，确是可以对所有属性生效，像这种对所有 HTML 标签生效的属性，在 HTML 中称为 全局属性。
详细可查看文档：MDN Web 文档 - HTML 全局属性。
这里记录几个有用到的全局属性。
自定义数据属性 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) 都会被下个字母的大写替代(驼峰拼写)。
<!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>Last updated
Was this helpful?