JavaScript 动态修改 Theme Color：判断 Meta 标签是否存在并添加

使用 JavaScript 动态修改 Theme Color：判断 Meta 标签是否存在并添加

在使用 JavaScript 动态修改网页主题颜色 (theme-color) 时，需要先判断 <meta name='theme-color'> 标签是否存在。如果不存在，则需要先创建该标签并添加至 HTML 头部。

代码实现：

// 获取 meta 标签
let meta = document.querySelector('meta[name='theme-color']');

// 如果不存在，则创建新的 meta 标签
if (!meta) {
  meta = document.createElement('meta');
  meta.setAttribute('name', 'theme-color');
  document.head.appendChild(meta);
}

// 修改 meta 标签的 content 属性
meta.setAttribute('content', '#000000'); // 可以替换成你想要的颜色值

代码说明：

使用 document.querySelector() 方法获取 <meta name='theme-color'> 标签。
如果 meta 为 null，则表示该标签不存在，需要创建新的标签：
- 使用 document.createElement('meta') 创建一个新的 <meta> 标签。
- 使用 setAttribute() 方法设置标签的 name 属性为 theme-color。
- 使用 document.head.appendChild() 方法将新创建的标签添加到 HTML 头部。
使用 meta.setAttribute('content', '#000000') 修改标签的 content 属性，将主题颜色设置为 #000000（黑色）。你可以根据需要替换成其他颜色值。

注意事项：

该代码需要在网页加载完毕后执行，例如在 DOMContentLoaded 事件触发后执行。
为了确保兼容性，最好使用 document.head.appendChild() 方法将标签添加到 HTML 头部，而不是直接修改 HTML 代码。
<meta name='theme-color'> 标签通常用于设置移动设备的主题颜色，在不同的浏览器和设备上可能会有不同的效果。

通过以上方法，你可以根据需要动态修改网页的主题颜色，并确保 <meta name='theme-color'> 标签始终存在。