189 8069 5689

javascript如何更改网页标题

这篇文章主要讲解了“javascript如何更改网页标题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何更改网页标题”吧!

创新互联是专业的兴安盟乌兰浩特网站建设公司,兴安盟乌兰浩特接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行兴安盟乌兰浩特网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

方法:1、使用“document.getElementsByTagName("title")[0].innerText = '值'”;2、使用“document.title='值'”;3、使用“$('title').html('值')”。

javascript如何更改网页标题

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

title在html中属于特殊的节点元素,因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生js有两种方式可以修改,jQuery中也能简单设置。下面给大家介绍一下。

innerText 方式

通过console.log(document.getElementsByTagName("title")[0]),发现能打印出标签,标签里面只有文字节点,故猜测只能识别TextNode,所以用innerText方式设置title的值,果然成功了。</p><pre>document.getElementsByTagName("title")[0].innerText = '需要设置的值';</pre><p><strong>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>我们在浏览器取得了焦点和失去焦点的时候改变title的值,可以发现切换浏览器选项卡的时候,title发生了改变。</p><p><strong>jQuery方式</strong></p><p>当然如果你的项目里面依赖jQuery,可以使用jq的方法设置</p><pre>$('title').html('值') $('title').text('值')</pre><p>jq中两种方式都可以实现</p><p><strong>总结</strong></p><p>原生js中我们可以通过 <code>innerText</code> , <code>document.title</code> 两种方式动态修改网页的title .</p><p>jq中我们可以通过 <code>$('title').html('值')</code> 或者 <code>$('title').text('值')</code> 进行修改。</p><p>感谢各位的阅读,以上就是“javascript如何更改网页标题”的内容了,经过本文的学习后,相信大家对javascript如何更改网页标题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!</p> <br> 网站标题:javascript如何更改网页标题 <br> 分享地址:<a href="http://zwzwh.cn/article/gsjhcp.html">http://zwzwh.cn/article/gsjhcp.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/sgseoh.html">抖音小姐姐们的购物专属推荐,让你不再愁嫁</a> </li><li> <a href="/article/sjpcsg.html">智能门窗短视频代运营公司</a> </li><li> <a href="/article/eghodd.html">网通便宜服务器租用费用是多少租用服务器要注</a> </li><li> <a href="/article/ipgspp.html">纯css代码如何实现下拉菜单效果的方法</a> </li><li> <a href="/article/dcihpeh.html">路由器慢图片 wifi路由器慢</a> </li><li> <a href="/article/dgesjje.html">ios开发微信朋友圈缓存 ios开发微信朋友圈缓存在哪</a> </li><li> <a href="/article/djedosi.html">如何使用python控制手机</a> </li><li> <a href="/article/dpeipdh.html">探索Linux内核的地址空间(linux内核地址空间)</a> </li><li> <a href="/article/dhgchjs.html">如何开通免费邮箱</a> </li><li> <a href="/article/ccsogce.html">为什么需要网站搜索引擎优化,网站搜索引擎优化的重要性</a> </li> </ul> </div> </div> <footer> <div class="foot container"> <div class="footl fl"> <h3>联系我们</h3> <dl> 您好HELLO!<br> 感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。 </dl> <ul> <li>电话:028- <span>86922220 18980695689</span></li> <li>商务合作邮箱:631063699@qq.com</li> <li>合作QQ: 532337155</li> <li>成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼</li> </ul> </div> <div class="footr fr"> <h3>乐尚佳建站工作室</h3> <dl> 成都乐尚佳网站建设公司拥有多年以上互联网从业经验的精英团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,乐尚佳建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务! </dl> <h3>乐尚佳观点</h3> <dl> 相对传统的成都网站建设公司而言,乐尚佳鼎是互联网中的网站品牌策划精英,我们精于企业品牌与互联网相结合的整体战略服务。<br> 我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。 </dl> </div> </div> <div class="link"> <div class="container"> <span> 友情链接:</span> <a href="http://www.dmvi.cn/ser/huace/" title="成都画册设计公司" target="_blank">成都画册设计公司</a>   <a href="http://www.scdazhu.cn/" title="scdazhu.cn" target="_blank">scdazhu.cn</a>   <a href="http://www.cdhuace.com/zhangui.html" title="四川成都展柜定制厂家" target="_blank">四川成都展柜定制厂家</a>   <a href="http://www.kmzlpu.com/" title="自动洗车机" target="_blank">自动洗车机</a>   <a href="http://www.cdkjz.cn/fangan/secu/" title="安防网站建设方案" target="_blank">安防网站建设方案</a>   <a href="http://www.dmvi.cn/" title="成都广告制作" target="_blank">成都广告制作</a>   <a href="http://www.lowhcmsc.com/" title="实木楼梯维修" target="_blank">实木楼梯维修</a>   <a href="http://www.kmjkls.com/" title="昆明做网站" target="_blank">昆明做网站</a>   <a href="http://www.lingaogroup.com.cn/" title="食品包装袋设计" target="_blank">食品包装袋设计</a>   <a href="http://www.pzfdjzy.com/" title="pzfdjzy.com" target="_blank">pzfdjzy.com</a>    </div> </div> <div class="copy">