电子没有调整大小 - JavaScript

在 HTML 中，我们通常可以使用 CSS 来调整元素的大小。然而，在 JavaScript 中，元素的大小并不是一个简单的控制，因为它涉及到更多复杂的概念，如盒模型、文档流等等。

盒模型

盒模型定义了一个元素的大小，包括了元素的内容、内边距、边框和外边距。在 JavaScript 中，我们可以通过以下方式获取元素的大小：

const element = document.getElementById('example');
const width = element.offsetWidth; // 获取元素的宽度，包括内边距和边框
const height = element.offsetHeight; // 获取元素的高度，包括内边距和边框

需要注意的是，offsetWidth 和 offsetHeight 返回的是整数，表示元素的像素大小。如果要获取元素的具体大小，需要再减去内边距和边框的大小：

const element = document.getElementById('example');
const width = element.offsetWidth - parseInt(getComputedStyle(element).getPropertyValue('padding-left')) - parseInt(getComputedStyle(element).getPropertyValue('padding-right')) - parseInt(getComputedStyle(element).getPropertyValue('border-left-width')) - parseInt(getComputedStyle(element).getPropertyValue('border-right-width'));
const height = element.offsetHeight - parseInt(getComputedStyle(element).getPropertyValue('padding-top')) - parseInt(getComputedStyle(element).getPropertyValue('padding-bottom')) - parseInt(getComputedStyle(element).getPropertyValue('border-top-width')) - parseInt(getComputedStyle(element).getPropertyValue('border-bottom-width'));

文档流

文档流是网页中元素排列的方式。在文档流中，元素的大小和位置是相对于其父元素或文档流的位置而言的。如果元素的父元素或兄弟元素大小发生变化，该元素的大小和位置也会相应地发生变化。

在 JavaScript 中，如果要改变元素的大小，可以使用以下方式：

const element = document.getElementById('example');
element.style.width = '100px'; // 修改元素的宽度
element.style.height = '50px'; // 修改元素的高度

需要注意的是，如果元素的大小是相对于其父元素而言的，那么在改变元素大小时，可能会影响到其它兄弟元素的位置。为了解决这个问题，可以使用 CSS 中的 position 属性来将元素的位置设置为绝对定位：

const element = document.getElementById('example');
element.style.position = 'absolute';
element.style.width = '100px';
element.style.height = '50px';

这样，即使改变了该元素的大小，其它兄弟元素的位置也不会发生变化。

总结

在 JavaScript 中，元素的大小和位置涉及到盒模型和文档流等更加复杂的概念。如果要修改元素的大小和位置，需要了解这些概念。同时，需要注意在修改元素大小时可能会影响到其它兄弟元素的位置。