Cómo hacer que la fuente negrita usando JavaScript?

En este artículo, vamos a aprender cómo hacer el tipo de letra negrita usando JavaScript ? Todo esto se puede hacer con un clic del botón y todo el crédito es para el código JavaScript que se ejecutará en el navegador cuando se hace clic en el botón.

El front-end JavaScript es divertido, ya que se ocupa de la creatividad junto con la programación de la página web y lo que es intratable. El texto es un elemento común en una página web y, a veces tenemos que utilizar un tipo de letra negrita para diferenciarlo de los otros contenidos y hacer más fácil la gente con problemas de visión class para leer el texto.

Todo esto se puede hacer con un clic del botón y todo el crédito es para el código JavaScript que se ejecutará en el navegador cuando se hace clic en el botón. Vamos a ver cómo hacerlo, pero primero tenemos que comenzar con el marcado.

Código – HTML

<p id="content"> This is a sample paragraph </p>
<button id="button"> Make Bold </button>

Es una simple de marcas que va a enseñar cómo funciona en el nivel básico. Tenemos un párrafo que queremos apuntar con id contenido y un botón con el botón Identificación del para desencadenar el cambio en el peso del texto. Ahora es el momento para espolvorear algo de código JavaScript.

Código – JavaScript

//Get the button element
var btn = document.getElementById('button');
//Get paragraph element
var para = document.getElementById('content');
//Define an click event listener on button
btn.addEventListener('click', function() {
//Change the font weight style to 700
para.style.fontWeight = '700';
});

En este código, primero seleccionamos los elementos en el documento utilizando su ID. El elemento de botón se almacena en la variable BTN y el párrafo se almacena en la variable párr. A continuación, se aplica un detector de eventos click usando método addEventListener , que al recibir el evento click llamará a la función de devolución de llamada.

En esta función, nos dirigimos a la propiedad de estilo y en su interior se utiliza la propiedad del fontWeight y establezca el valor en 700 . Tenga en cuenta que este valor es una cadena, ya que sólo funciona con valores de cadena. Después de la adición de este detector de eventos, cuando el usuario hace clic en el botón, el contenido del párrafo se convierte en texto en negrita. He aquí una demostración del ejemplo anterior ,

DEMO

HTML con JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Demo</title>
</head>
<body>
<p id="content"> This is a sample paragraph </p>
<button id="button"> Make Bold </button>
<script>
//Get the button element
var btn = document.getElementById('button');
//Get paragraph element
var para = document.getElementById('content');
//Define an click event listener on button
btn.addEventListener('click', function() {
//Change the font weight style to 700
para.style.fontWeight = '700';
});
</script>
</body>
</html>

salida

How to make the font bold using JavaScript? - 4

Esperanza te gusta este artículo; por favor comparta sus pensamientos en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *