La propiedad fontSize se utiliza para establecer u obtener el tamaño de fuente de los caracteres que deben aparecer en una palabra.
Sintaxis:
- Devuelve la propiedad fontSize.
object.style.fontSize
- Establece la propiedad fontSize.
object.style.fontSize = "value|initial|inherit"
Valores de propiedad:
| Valor | Descripción |
|---|---|
| xx-pequeño x-pequeño pequeño mediano grande x-grande xx-grande |
Predefinir tamaños de fuente |
| menor | Disminuye en una unidad relativa del tamaño de fuente |
| más grande | Aumenta en una unidad relativa del tamaño de fuente |
| longitud | Tamaño de fuente en unidad de longitud |
| % | % del tamaño de fuente del elemento principal |
| inicial | Establecer valor predeterminado |
| heredar | Heredar propiedad de su valor principal |
Valor devuelto: Devuelve el tamaño de letra del texto del elemento.
Ejemplo-1: cambie el tamaño de fuente a pequeño.
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontSize Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;
font-weight: bold;"
id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontSize Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Change font size in to small.
document.getElementById(
"Geek1").style.fontSize = "small";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Cambie el tamaño de fuente a xx-grande.
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontSize Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 10px;
font-weight: bold;"
id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontSize Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// change into xx-large.
document.getElementById(
"Geek1").style.fontSize = "xx-large";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-3: Cambie el tamaño de fuente usando la unidad de longitud.
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontSize Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 10px;
font-weight: bold;"
id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontSize Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Change font size from
// from 10px to 30px
document.getElementById(
"Geek1").style.fontSize = "30px";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-4: cambiar el tamaño de fuente usando ‘%’
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontSize Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 10px;
font-weight: bold;"
id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontSize Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Change font-size from 100% to 200%
document.getElementById(
"Geek1").style.fontSize = "200%";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón
- Después de hacer clic en el botón
Navegadores compatibles: El navegador compatible con HTML | La propiedad DOM Style fontSize se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA