Javascript 为什么可以';我不能在没有滚动条的情况下得到容器的宽度吗?

Javascript 为什么可以';我不能在没有滚动条的情况下得到容器的宽度吗?,javascript,css,Javascript,Css,我有一个容器(砖石网格)和一些图像。我有一个函数来计算容器的宽度,还有一个函数来计算每个图像的宽度。但是,获取容器宽度的函数不能像预期的那样工作,因为宽度包含滚动条。因此,图像宽度的计算也不正确 //Function to calculate the width of the container getContainerWidth() { const postContainer = document.getElementsByClassName( 'container'

我有一个容器(砖石网格)和一些图像。我有一个函数来计算容器的宽度,还有一个函数来计算每个图像的宽度。但是,获取容器宽度的函数不能像预期的那样工作,因为宽度包含滚动条。因此,图像宽度的计算也不正确

//Function to calculate the width of the container
 getContainerWidth() {
    const postContainer = document.getElementsByClassName(
      'container'
    );
    if (postContainer.length > 0) {
      let containerWidth = postContainer[0].clientWidth;
      containerWidth = `${containerWidth}px`;

      this.setState({
        containerWidth: containerWidth,
      });
    }
  }
我已经尝试过各种功能(offsetWidth、clientWidth、scrollWidth…),但都不适合我。我还尝试获得滚动条的宽度,并从容器宽度中减去它。这是可行的,但我需要一个在不同浏览器上工作的解决方案

例如,如果浏览器宽度为1920px。然后容器宽度也是1920px,但它应该是1905px(1920-滚动条)。

获取

对于没有CSS或内联布局框的元素,Element.clientWidth属性为零,否则它是元素的内部宽度(以像素为单位)。它包括填充,但不包括垂直滚动条(如果存在,如果渲染)、边框或边距

范例

var width = element.clientWidth;

把一个容器放在你的容器里,然后把图片放在这个容器里,这是做什么的?它也包括酒吧的宽度吗?我外面已经有一个集装箱了。我有一个包含页眉、页脚和包含图像的容器。外部容器和带有图像的容器都包括滚动条如果隐藏滚动条是一个选项,请使用
:-webkit滚动条{width:0px;}
,然后计算宽度是否有理由使用
px
而不是类似“
100%
”的东西?也许这是一种更简单的方法。我需要px中的容器,因为我用它来计算图像宽度。我减去项目之间的marign,然后将结果除以列数。例如,如果我有4列,容器宽度为1920px。然后我减去3x20px(项目之间的间隙)。然后我将结果(1860px)除以列数(4)。结果是每个图像的宽度(465px)。