JavaScript如何设置页面标题

这篇文章将为大家详细讲解有关JavaScript如何设置页面标题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都服务器托管,创新互联提供包括服务器租用、成都服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、域名注册等业务的一体化完整服务。电话咨询:13518219792

设置页面标题的方法:1、使用“document.getElementsByTagName("title")[0].innerText='需要设置的值';”语句;2、使用“document.title = '需要设置的值';”语句。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

title在html中属于特殊的节点元素

因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml来更改它的值。

经测试原生js有两种方式可以修改,下面来介绍一下。

JavaScript设置页面标题的方法

1、innerText 方式

通过console.log(document.getElementsByTagName("title")[0]),发现能打印出标签,标签里面只有文字节点,故猜测只能识别TextNode,所以用innerText方式设置title的值,果然成功了。</p><pre>document.getElementsByTagName("title")[0].innerText = '需要设置的值';</pre><p><strong>2、document.title方式</strong></p><p>经过测试,还可通过document.title 设置title的值。</p><pre>console.log(document.title);      # 可以获取title的值。 document.title = '需要设置的值';    # 设置title的值。</pre><p>例子</p><pre>window.onfocus = function () {  document.title = '恢复正常了...'; }; window.onblur = function () {  document.title = '快回来~页面崩溃了'; };</pre><p>关于“JavaScript如何设置页面标题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。</p> <br> 网页题目:JavaScript如何设置页面标题 <br> 文章路径:<a href="http://myzitong.com/article/gjdhgo.html">http://myzitong.com/article/gjdhgo.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dgsgpjo.html">关于android跑分的信息</a> </li><li> <a href="/article/dgsgphi.html">关于diggandroid的信息</a> </li><li> <a href="/article/dgsghoo.html">飞腾怎么装mysql 飞腾41怎么装在win7</a> </li><li> <a href="/article/dgsgphp.html">电脑运行有没有快捷键 电脑运行有没有快捷键设置</a> </li><li> <a href="/article/dgsghos.html">电压低android 电压低用稳压器有用吗</a> </li> </ul> </div> </div> </div> <!--底部--> <footer> <div class="foot"> <div class="container"> <h1>梓潼大橙子建站您身边的网站制作服务商</h1> <div class="foot1"> <ul> <li> <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl> <p>四川-成都青羊区太升南路288号<br> 锦天国际A座10楼 </p> </li> <li> <dl><i class="iconfont"></i><b>电话/TEL</b></dl> <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br> <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 ) </p> </li> <li> <dl><i class="iconfont"></i><b>QQ咨询</b></dl> <p> 244261566 (售前)<br> 631063699 (售后) </p> </li> <li> <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl> <p> service@cdcxhl.com (业务)<br> hr@cdcxhl.com (求职) </p> </li> </ul> </div> <div class="link"> 友情链接: <a href="http://www.cdxwcx.cn/tuoguan/yaan.html" title="雅安电信机房" target="_blank">雅安电信机房</a>   <a href="http://www.sffdjwx.cn/" title="沃尔沃电机组维修" target="_blank">沃尔沃电机组维修</a>   <a href="http://m.cdcxhl.com/liucheng.html" title="成都网站建设流程" target="_blank">成都网站建设流程</a>   <a href="https://www.cdcxhl.com/xiyun.html" title="西云主机托管" target="_blank">西云主机托管</a>   <a href="http://www.njjike.cn/" title="成都办公窗帘" target="_blank">成都办公窗帘</a>   <a href="http://www.ybfdjwx.com/" title="成都产品认证" target="_blank">成都产品认证</a>   <a href="http://seo.cdkjz.cn/seo/" title="网站SEO优化" target="_blank">网站SEO优化</a>   <a href="http://www.cddcz.com/" title="大橙子建站" target="_blank">大橙子建站</a>   <a href="http://www.pgwzsj.com/" title="普格博源建站" target="_blank">普格博源建站</a>   <a href="http://www.cdkjz.cn/wangzhan/" title="网站推广" target="_blank">网站推广</a>    </div> </div> </div> <div class="copy container"> Copyright