La propiedad DOM offsetWidth se usa para devolver el ancho de diseño de un elemento como un número entero. Se mide en píxeles. Incluye ancho, borde, relleno y barras de desplazamiento verticales, pero no margen. Si el elemento está oculto, devuelve 0.
Sintaxis:
element.offsetWidth
Valor devuelto: Devuelve el ancho de diseño de un elemento como un número entero.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM Style offsetWidth Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<p id="demo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var element = document.getElementById("GFG");
var txt = "Width including padding and border: "
+ element.offsetWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM Style offsetWidth Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<br>
<p id="demo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var element = document.getElementById("GFG");
var txt = "";
txt += "Width with padding: "
+ element.clientWidth + "px<br>";
txt += "Width with padding and border: "
+ element.offsetWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM offsetWidth se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA