>웹 프론트엔드 >JS 튜토리얼 >자바스크립트로 페이지 제목 바꾸는 방법

자바스크립트로 페이지 제목 바꾸는 방법

青灯夜游
青灯夜游원래의
2021-10-20 15:55:282661검색

방법: 1. "document.getElementsByTagName("title")[0].innerText = 'value'"를 사용합니다. 2. "document.title='value'"를 사용합니다. 3. "$('title')을 사용합니다. .html('값')".

자바스크립트로 페이지 제목 바꾸는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

title은 document.getElementsByTagName("title")[0]을 사용하여 웹 페이지의 제목 태그를 가져올 수 있지만 를 사용할 수 없기 때문에 HTML의 특수 노드 요소입니다. document.getElementsByTagName("title")[0].innerHtml은 해당 값을 변경하는 데 사용됩니다. 테스트 후 네이티브 js를 수정하는 방법은 두 가지가 있으며, jQuery에서도 쉽게 설정할 수 있습니다. 아래에서 소개해드리겠습니다.
document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生js有两种方式可以修改,jQuery中也能简单设置。下面给大家介绍一下。

innerText 方式

通过console.log(document.getElementsByTagName("title")[0]),发现能打印出b2386ffb911b14667cb8f0f91ea547a7标签,标签里面只有文字节点,故猜测只能识别TextNode,所以用innerText方式设置title的值,果然成功了。

document.getElementsByTagName("title")[0].innerText = '需要设置的值';

document.title方式

经过测试,还可通过document.title 设置title的值。

console.log(document.title);      # 可以获取title的值。
document.title = '需要设置的值';    # 设置title的值。

例子

window.onfocus = function () {
 document.title = '恢复正常了...';
};
window.onblur = function () {
 document.title = '快回来~页面崩溃了';
};

我们在浏览器取得了焦点和失去焦点的时候改变title的值,可以发现切换浏览器选项卡的时候,title发生了改变。

jQuery方式

当然如果你的项目里面依赖jQuery,可以使用jq的方法设置

$('title').html('值')

$('title').text('值')

jq中两种方式都可以实现

总结

原生js中我们可以通过 innerText , document.title 两种方式动态修改网页的title .

jq中我们可以通过 $('title').html('值') 或者 $('title').text('值')

innerText 메소드

console.log(document.getElementsByTagName("title")[0])을 통해 b2386ffb911b14667cb8f0f91ea547a7 텍스트 노드만 있어서 TextNode만 인식할 수 있을 것 같아서 innerText를 사용하여 제목 값을 설정했더니 성공했습니다.

rrreeedocument.title 메소드

테스트 후 document.title을 통해 title 값을 설정할 수도 있습니다. 🎜rrreee🎜Example🎜rrreee🎜브라우저가 포커스를 얻고 포커스를 잃으면 제목 값을 변경합니다. 브라우저 탭을 전환하면 제목이 변경되는 것을 볼 수 있습니다. 🎜🎜jQuery 메서드
🎜🎜물론, 프로젝트가 jQuery에 의존하는 경우 jq 메서드를 사용하여 설정할 수 있습니다.🎜rrreee🎜두 메서드 모두 jq에서 구현할 수 있습니다🎜🎜요약
🎜🎜네이티브 js에서는 innerTextdocument.title의 두 가지 방법으로 웹페이지 제목을 동적으로 수정할 수 있습니다.
🎜🎜jq $('title').html('value') 또는 $('title').text('value'). 🎜🎜위 내용은 JS를 사용하여 브라우저 TITLE을 변경하는 자세한 방법입니다. 유용하다고 생각되면 즐겨찾기에 추가하세요. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 자바스크립트로 페이지 제목 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.