Para cambiar o establecer un estilo de fuente para cierto texto, se debe cambiar la propiedad CSS fontFamily . La propiedad fontFamily establece o devuelve una lista de nombres de familias de fuentes para el texto de un elemento.
Sintaxis:
object.style.fontFamily = "font"
Para cambiar el estilo de fuente mediante el menú desplegable de opciones: Los valores de fuente se pueden pasar en etiquetas de opción usando valor de opción .
Sintaxis:
<option value="value">
El atributo de valor especifica el valor que se enviará cuando se envíe un formulario. Entonces, después de seleccionar el valor que se enviará, establecemos la propiedad fontFamily para el texto en el elemento al valor seleccionado como se especifica en la sintaxis anterior. En la función javascript, aquí changeFontStyle() , el valor de la propiedad fontFamily se establece en el valor de fuente de la opción seleccionada. De forma predeterminada, está configurado en Times New Roman.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Change Font Style by Option
Dropdown Javascript
</title>
</head>
<body style="text-align:center;">
<div id="output-text">
<h1 style="color:green;">
GeeksForGeeks
</h1>
</div>
<select id="input-font" class="input"
onchange="changeFontStyle (this);">
<option value="Times New Roman"
selected="selected">
Times New Roman
</option>
<option value="Arial">Arial</option>
<option value="fantasy">Fantasy</option>
<option value="cursive">cursive</option>
</select>
<script>
var changeFontStyle = function (font) {
document.getElementById(
"output-text").style.fontFamily
= font.value;
}
</script>
</body>
</html>
Producción:
- Antes de seleccionar cualquier opción (Valor inicial – Times New Roman):
- Después de seleccionar una opción en el menú desplegable:
- Después de seleccionar otra opción en el menú desplegable:
Publicación traducida automáticamente
Artículo escrito por sayaliparulekar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA