¿Cómo obtener el ancho actual de un div usando js?

El primer caso es que el ancho y el alto están escritos en la hoja de estilos, como #div1{width:120px;}. En este caso no podemos obtener el ancho mediante #div1.style.width pero podemos obtener el ancho mediante #div1.offsetWidth.

El segundo caso es que el ancho y el alto se escriben en líneas, como style="width:120px;", en este caso, el ancho se puede obtener mediante los dos métodos anteriores. (Lo que está en línea, es decir, escribir estilos directamente en etiquetas html)

En resumen, debido a que id.offsetWidth e id.offsetHeight ignoran los estilos escritos en la hoja de estilos o en línea, entonces nosotros Será mejor que utilices estas dos propiedades para obtener el ancho y el alto del elemento. Tenga en cuenta que si estos atributos no se escriben en el estilo en línea, no estarán disponibles a través de id.style.atrr.

Hoy en día, la producción front-end rara vez escribe estilos directamente en estilos, sino que los escribe en hojas de estilo. Si desea obtener un estilo que no tiene un estilo correspondiente (por ejemplo, #div1.style.width debe ser #div1.offsetWidth), solo puede obtener los atributos de la hoja de estilo que no son del navegador individualmente, intente buscar "JS obtiene atributos de estilo" o similar .

Código:

var o = document.getElementById("view");var h = o.offsetHeight; //altura var w = o.offsetWidth; //ancho; p>

Ampliado:

Programación JS:

JavaScript es un lenguaje de scripting cuyo código fuente no se compila antes de enviarse al cliente para su ejecución. En cambio, el texto tiene el formato. Los códigos de caracteres se envían al navegador, que los interpreta y ejecuta. La debilidad de los lenguajes literales es que son menos seguros. En JavaScript, si una línea no funciona, las siguientes tampoco funcionarán. La solución es usar try{}catch(){}.

Javascript está clasificado como un lenguaje de traducción directa porque el motor principal carga el código y lo traduce cada vez que V8 lo hace antes de comenzar; run Traduce todo el código mientras otros motores traducen el código línea por línea (SpiderMonkey almacena las instrucciones traducidas para mejorar el rendimiento, esto se llama compilación justo a tiempo), pero como la mayor parte del núcleo de V8 está escrito en Javascript (y SpiderMonkey está escrito en C++).

Por lo tanto, en diferentes pruebas, el desempeño de ambos tiene ventajas y desventajas. En comparación con los lenguajes compilados como C, los programas escritos en lenguajes compilados deben compilarse antes de poder ejecutarse, es decir, el código primero se compila en código de máquina y luego se ejecuta.

Referencia: javascript_Enciclopedia Baidu