La propiedad de fuente del estilo HTML DOM se utiliza para cambiar las propiedades de fuente del elemento. Se puede usar para cambiar el estilo de fuente, el peso, el tamaño y la familia.
Sintaxis:
- Para configurar el estilo de fuente:
node.style.font = "font-properties font-size font-family;"
- Para obtener el estilo de fuente actual:
node.style.font;
Valores devueltos: Devuelve un valor de string, que representa diferentes propiedades de fuente del elemento.
Valor de propiedad: es una string que tiene valores como propiedades de fuente, tamaño de fuente y familia de fuentes.
Las propiedades son requeridas en el siguiente orden:
- Estilo de fuente
- variante de fuente
- peso de la fuente
- Tamaño de fuente
- Altura de fuente
- Familia tipográfica
Enfoque: tenemos un elemento de párrafo con un ID de texto . Creamos una función en JavaScript que toma un valor de string en la variable gfg como parámetro y establece la propiedad style.fonttext del elemento ‘ ‘ ID en ‘ ‘. Llamamos a esta función desde los botones y proporcionamos los valores de propiedad de manera apropiada.gfg
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM | Style font property</title>
</head>
<body>
<p id='text'>Welcome to GeeksForGeeks</p>
<button onclick=
"changeFont('italic 20px arial')">
Italic, Arial, 20px
</button>
<button onclick=
"changeFont('bold 26px serif')">
Bold, Serif, 26px
</button>
<button onclick=
"changeFont('italic bold 30px Montserrat')">
Italic, Montserrat, 20px
</button>
<button onclick="changeFont('900 34px hack')">
Weight 900, Hack, 34px
</button>
<script type="text/javascript">
function changeFont(gfg) {
// Get font style.
document.getElementById(
'text').style.font = gfg;
}
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM style.font se enumeran a continuación:
- Google Chrome
- Internet Explorer/Borde
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por rossoskull y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA