HTML 自动大写属性

在 HTML 中，标签属性是不区分大小写的，即 id 与 ID 视作同一属性。不过，为了增强可读性，很多程序员习惯将 HTML 属性全部大写或小写。虽然手动输入时可用 VSCode 插件等工具自动转换大小写，但要是代码已经存在且大小写不统一该怎么办呢？

这时就可以使用 HTML 自动大写属性的功能。只要在 HTML 标签中添加 data-* 的自定义属性并赋值为属性名，JavaScript 则可以通过元素的 dataset 属性获取到属性名，并将它们统一转换为大写或小写。

下面是一个例子：

<input type="text" data-placeholder="enter your name" >
<label for="submit-button" data-text="submit now"></label>
<button id="submit-button" onclick="submit()">Submit</button>

下面是 JavaScript 代码：

window.onload = function() {
  const inputs = document.getElementsByTagName('input');
  const labels = document.getElementsByTagName('label');
  for (const input of inputs) {
    if (input.dataset.placeholder) {
      input.placeholder = input.dataset.placeholder;
    }
  }
  for (const label of labels) {
    if (label.dataset.text) {
      label.textContent = label.dataset.text;
    }
  }
}

以上代码会将所有含有 data-* 的自定义属性的值转换为大写，并分别赋给对应的 HTML 属性。这样一来，即使原本大小写不统一，页面也会被统一转换成大写或小写展示。

总结

HTML 自动大写属性功能可以使网页更加规范，让代码可读性更强。在大型项目中尤为有用，也是我们编写高质量代码的一种方式。