参考资料

  1. HTML DOM单元格内容水平对齐
  2. HTML DOM 返回image的替代文本
  3. HTML DOM 返回文档中第一个锚的 innerHTML
  4. HTML DOM改变单元格的内容
  5. HTML DOM为表格创建一个标题
  6. HTML DOM 创建一个链接指向一个低分辨率的image
  7. HTML DOM document.write() 方法
  8. HTML DOM 改变链接的target属性实例

HTML DOM 返回文档的标题实例

HTML DOM 返回文档标题实例

详细介绍

HTML DOM 提供了访问和操作文档标题的方法,主要通过 document.title 属性实现。这个属性可以获取或设置当前文档的标题(即 <title> 标签的内容)。

标签

主要涉及的 HTML 标签是 <title>,它位于 <head> 部分。

用法

// 获取文档标题
var currentTitle = document.title;

// 设置文档标题
document.title = "新标题";

实例

<!DOCTYPE html>
<html>
<head>
    <title>初始标题</title>
</head>
<body>
    <button onclick="getTitle()">获取标题</button>
    <button onclick="changeTitle()">修改标题</button>
    
    <script>
        function getTitle() {
            alert("当前标题是: " + document.title);
        }
        
        function changeTitle() {
            document.title = "修改后的标题";
            alert("标题已修改");
        }
    </script>
</body>
</html>

功能

  1. 动态获取网页标题

  2. 动态修改网页标题

  3. 可用于标签页切换时的标题变化

  4. 可用于SEO优化或用户体验提升

CSS 扩展

虽然不能直接用 CSS 修改文档标题,但可以通过 JavaScript 结合 CSS 类来实现样式变化:

<style>
    .highlight-title {
        color: red;
        /* 其他样式 */
    }
</style>

<script>
    function highlightTitle() {
        document.title = "★ " + document.title + " ★";
        // 虽然不能直接样式化<title>,但可以改变其内容
    }
</script>