El ancho del contenido de un div puede obtenerse dinámicamente usando las propiedades clientWidth y scrollWidth según los requisitos del usuario. Si un usuario desea conocer el espacio requerido por el contenido real que se muestra, incluido el espacio ocupado por el relleno pero sin incluir las barras de desplazamiento, los márgenes o los bordes, entonces el usuario puede usar cualquiera de los siguientes procedimientos que devolverán el ancho de todo el contenido de un elemento.
- Usando la propiedad Element.ClientWidth
- Usando la propiedad Element.scrollWidth
Ejemplo 1: el ancho del contenido de div usando la propiedad ClientWidth devolverá el ancho de todo el contenido de un elemento.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
#div1 {
height: 100px;
width: 300px;
border: 2px solid black;
overflow: scroll;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Getting Content width</h3>
<div id="div1">
Calculate content width of a div on GeeksforGeek.
GeeksforGeeks is a computer science portal which
helps students to learn various programming language
and master data structures and algorithms. There are
various courses available to learn new skills.
</div>
<br>
<button onclick="contentwidth()">Content Width of Div</button>
<p id="p1"></p>
</center>
<script>
function contentwidth() {
var ans = "Content-width: "
+ angular.element(document.getElementById("div1").clientWidth)
+ "px<br>";
document.getElementById("p1").innerHTML = ans;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: el ancho del contenido de div usando la propiedad scrollWidth devolverá el ancho de todo el contenido de un elemento.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
#div1 {
height: 100px;
width: 300px;
border: 2px solid black;
overflow: scroll;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Getting Content width</h3>
<div id="div1">
Calculate content width of a div on GeeksforGeek.
GeeksforGeeks is a computer science portal which
helps students to learn various programming language
and master data structures and algorithms. There are
various courses available to learn new skills.
</div>
<br>
<button onclick="contentwidth()">Content Width of Div</button>
<p id="p1"></p>
</center>
<script>
function contentwidth() {
var ans = "Content-width: "
+ angular.element(document.getElementById("div1").scrollWidth)
+ "px<br>";
document.getElementById("p1").innerHTML = ans;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA