La propiedad fontWeight se usa para establecer o devolver qué tan gruesos o delgados deben aparecer los caracteres en una palabra.
Sintaxis:
- Devuelve la propiedad fontWeight.
object.style.fontWeight
- Establece la propiedad fontWeight.
object.style.fontWeight = "normal|lighter|bold|bolder|value| initial|inherit"
Valores de propiedad:
| Valor | Descripción |
|---|---|
| normal | Valor predeterminado de la fuente |
| encendedor | Más ligero de lo normal |
| audaz | Más audaz de lo normal |
| más audaz | Más audaz que audaz |
| valor | Defina de 100 a 900 donde 400 es el valor normal |
| inicial | Establecer a su valor predeterminado |
| heredar | Heredar propiedad del elemento principal |
Valor devuelto: Devuelve la negrita de la fuente de la string.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<!-- Property for p tag. -->
<p style="color: green;
width: 100%;
font-size: 30px;
font-weight: bold;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property for "p" tag form
// 'bold' to 'lighter'.
document.getElementById(
"sudo").style.fontWeight = "lighter";
}
</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:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property from normal to bold.
document.getElementById(
"sudo").style.fontWeight = "bold";
}
</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:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property bolder.
document.getElementById(
"sudo").style.fontWeight = "bolder";
}
</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:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set font using values.
document.getElementById(
"sudo").style.fontWeight = "1000";
}
</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 fontWeight se enumeran a continuación:
- Google Chrome 2 y superior
- Borde 12 y superior
- Firefox 1 y superior
- Internet Explorer 3 y superior
- Ópera 3.5 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA