Dé un elemento de string y la tarea es obtener las propiedades de fuente de un elemento en particular usando JavaScript.
Acercarse:
- Almacene una string en la variable.
- Luego use element.style.property para obtener el valor de propiedad de esa propiedad de elemento.
Ejemplo 1: este ejemplo obtiene la familia de fuentes del elemento [id = ‘GFG_UP’].
<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the font family property of
a particular element in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-family: sans-serif; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 30px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "click on button to get the font property";
el_up.innerHTML = str;
function gfg_Run() {
el_down.innerHTML =
"font-style is '" + el_up.style.fontFamily + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo obtiene el peso de fuente del elemento [id = ‘GFG_UP’].
<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the font weight property of
a particular element in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-family: sans-serif; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 30px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "click on button to get the font property";
el_up.innerHTML = str;
function gfg_Run() {
el_down.innerHTML =
"font-weight is '"+el_up.style.fontWeight + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA