La propiedad DOM clientWidth se usa para devolver el ancho visible de un elemento específico, incluido el relleno, pero excluyendo la medida del margen, el borde y el ancho de la barra de desplazamiento. Esta propiedad solo devuelve el ancho real de un elemento visible para el usuario. Es una propiedad de sólo lectura.
Sintaxis:
element.clientWidth
Valor devuelto: Devuelve un valor numérico que representa el ancho visible de un elemento.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM clientWidth Property
</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
height: 200px;
width: 250px;
padding: 40px;
margin: 25px;
border: 5px solid coral;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM clientWidth Property </h2>
<div id="GFG">
<h4 style="color:white;font-size:40px;">
GeeksforGeeks
</h4>
<p id="sudo" style="color:white;"></p>
</div>
<button onclick="Geeks()">Submit</button>
<script>
function Geeks() {
var w = document.getElementById("GFG");
var x = "viewable Height is: "
+ w.clientHeight +
"px<br>";
x += "viewable width is:: "
+ w.clientWidth + "px";
document.getElementById("sudo").innerHTML = x;
}
</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: los navegadores compatibles con la propiedad DOM clientWidth se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 5.0
- Firefox 1.0
- Ópera 8.0
- Safari 3.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA