Dada una página web que contiene el título de la página y la tarea es cambiar el título de una página web dinámicamente usando JavaScript.
Método 1: usar la propiedad document.title: la propiedad document.title se usa para establecer o devolver el título actual del documento. El título de la página se puede cambiar asignando el nuevo título como una string a esta propiedad. Esto cambiará el título del sitio web al título preferido.
Sintaxis:
newPageTitle = 'The title has changed!'; document.title = newPageTitle;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically change a web
page’s title using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to dynamically change a web
page’s title using JavaScript ?
</b>
<p>
Click on the button to change the page
title to: "The title has changed!"
</p>
<button onclick="changePageTitle()">
Change Page Title
</button>
<script type="text/javascript">
function changePageTitle() {
newPageTitle = 'The title has changed!';
document.title = newPageTitle;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar el método querySelector(): El método document.querySelector() se usa para seleccionar elementos en el documento. El elemento de título se puede seleccionar especificando el elemento de título en el selector como parámetro. Esto devolverá el elemento de título actual de la página.
La propiedad textContent de un elemento devuelve el contenido de texto de un Node específico. El título de la página se puede cambiar asignando el nuevo título requerido como una string a la propiedad textContent. Esto cambiará el título del sitio web al título preferido.
Sintaxis:
newPageTitle = 'The title has changed!';
document.querySelector('title').textContent = newPageTitle;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically change a web
page’s title using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to dynamically change a web
page’s title using JavaScript ?
</b>
<p>
Click on the button to change the page
title to: "The title has changed!"
</p>
<button onclick="changePageTitle()">
Change Page Title
</button>
<script type="text/javascript">
function changePageTitle() {
newPageTitle = 'The title has changed!';
document.querySelector('title').textContent
= newPageTitle;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA