参考资料

1. HTML DOM删除下拉列表中的选项
2. HTML DOM 返回图像映射某个区域的替代文字实例
3. HTML DOM 返回文档的最后一次修改时间 实例
4. HTML DOM 返回图像映射的某个区域的protocol 实例
5. HTML DOM 返回和设置链接的href属性实例
6. HTML DOM 返回一个链接的type属性的值实例
7. HTML DOM 重置表单
8. HTML DOM 修改

HTML DOM 返回和设置链接的hreflang属性实例

HTML DOM hreflang 属性

简介

hreflang 属性用于指定链接文档的语言代码，帮助浏览器和搜索引擎理解目标页面的语言。

标签

主要用于 <a> 和 <link> 标签：

<a href="example.html" hreflang="en">English Version</a>
<link rel="alternate" hreflang="es" href="es/example.html">

用法

// 获取 hreflang 属性值
var lang = document.getElementById("myLink").hreflang;

// 设置 hreflang 属性值
document.getElementById("myLink").hreflang = "fr";

实例

<a id="myLink" href="french.html" hreflang="fr">Version Française</a>

<script>
  // 获取当前 hreflang
  console.log(document.getElementById("myLink").hreflang); // 输出: fr
  
  // 修改 hreflang
  document.getElementById("myLink").hreflang = "de";
</script>

功能

1. 指定链接文档的语言

2. 帮助搜索引擎提供正确的语言版本

3. 改善网站的多语言支持

CSS 扩展

可以通过属性选择器为不同语言的链接添加样式：

/* 为法语链接添加样式 */
a[hreflang="fr"] {
  color: blue;
  font-style: italic;
}

/* 为德语链接添加样式 */
a[hreflang="de"] {
  color: black;
  font-weight: bold;
}