使用JavaScript动态地改变页面的标题,从h1标签(Dynamically change pa

2019-10-17 08:26发布

首先,感谢百忙之中阅读此问题的时间。 真是一个伟大的社会堆栈溢出:)

我需要改变基于包含在该网页上的H1元素的文本页面的标题标签。

我一直在寻找周围,我已经找到了“document.title时” JavaScript函数。 我一直在玩弄它,试图从有类“范畴-H1”我的H1元素拉文本。

<script type="text/javascript">
    document.title = document.getElementsByClassName("Category-H1");
</script>

然而,它只是设置页面标题为“[对象的HTMLCollection]”,这是我的理解是一个空值。 被JS最好是做到这一点? 我知道我的代码被抬高,任何提示?

提前致谢! - 亚历

编辑

我被告知,这行代码,返回集合对象,而不是一个字符串。 有人指出的代码示例:

setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000); 

但是,此代码生成“iFinity用户资料 - 未定义”的页面标题。 我有一个页面设置为“测试”的ID在h1元素。

Answer 1:

你快到了。

[object HTMLCollection]不是空值-它是html元素的集合的字符串表示。 你要选择的第一个,然后从它那里得到的内部HTML。

document.getElementsByClassName("Category-H1")[0].innerHTML

此外,请确保你做到这一点,文件加载后。 您可以通过在文档的末尾添加脚本做到这一点,还是有它的运行onload身体的事件。



Answer 2:

这应该工作:

document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;

getElementsByClassName()函数返回元素的集合( [object HTMLCollection]所以你需要把它弄出来的元素,我假设的第一个。



Answer 3:

一个更好的解决方案可能是以下几点:

 <script type="text/javascript"> document.title = document.getElementsByTagName("H1")[0].innerHTML </script> 

这将节省从设置H1类。



Answer 4:

这是非常接近的,但我发现 - 反正与Firefox的工作,当您使用的getElementsByTagName(“H1”),它给你一个数组,你已经认识。 然而,它工作得更好使用:

<script type="text/javascript">
    document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>

注意在加入.item(0).innerHTML的获取元件而不是[0] .innerHTML之后。



Answer 5:

我不知道,如果你有,或没有任何经验,但是,这似乎是很受追捧的是使用jQuery的另一种选择。 由于在前面的讨论中,下面的代码假定您有兴趣抓住“H1”标签或“类别-H1”级的第一个实例。 这一点很重要,因为除非你的目标是“id”属性,你会得到项目的集合。

此代码还假定您已经直接从您的网站或引用CDN实现了jQuery库的包容性。

<script type="text/javascript">
    $(document).ready(function () {
        document.title = $("H1")[0].innerText;
    });
</script>

在$(文件)。就绪将调用它包围的文档对象模型(DOM)后,才完成加载功能,和之前浏览器的渲染引擎显示网页。

该函数里面的内容会抢了“H1”的标签的第一个实例的内文并指定在头节文本值到文档的标题标签。

我希望这增加的帮助另一层。



文章来源: Dynamically change page title from h1 tag using Javascript