Javascript 如何获得；“真的”；以Chrome/IE格式计算的CSS宽度

当尝试在vanilla JS中实现一个可调整大小的面板时，当面板有滚动条时，问题开始出现。我做了这个测试，令我惊讶的是，当我增加面板的宽度时，面板变小了，而不是变大了

我建议在这里的JSFIDLE上查看它，但这里的代码也是如此

getInnerWidth=函数（elem）{
返回parseFloat（window.getComputedStyle（elem.width）；
};
getExternalWidth=函数（元素）{
返回elem.offsetWidth-getInnerWidth（elem）；
};
setTotalWidth=函数（元素，宽度）{
elem.style.width=（width-getExternalWidth（elem））+“px”；
};
getInnerHeight=函数（元素）{
返回parseFloat（window.getComputedStyle（elem.height）；
};
getExternalHeight=函数（元素）{
返回elem.offsetHeight-getInnerHeight（elem）；
};
setTotalHeight=功能（元素、高度）{
elem.style.height=（height-getExternalHeight（elem））+“px”；
};
//===========================================================================================
var container=document.getElementById（“容器”）；
var content=document.getElementById（“内容”）；
minus 10css=函数（）{
container.style.width=（getInnerWidth（container）-10）+“px”；
};
equal200css=函数（）{
container.style.width=“200px”；
};
plus10css=函数（）{
container.style.width=（getInnerWidth（container）+10）+“px”；
};
minus10=函数（）{
setTotalWidth（容器，容器.offsetWidth-10）；
};
等式200=函数（）{
设置总宽度（容器，200）；
};
plus10=函数（）{
setTotalWidth（容器，容器.offsetWidth+10）；
};
cssCalc=函数（）{
content.style.height=“计算（100%-30px）”；
};
total300=函数（）{
设置总高度（内容，300）；
};
css300=函数（）{
content.style.height=“300px”；
};
#容器{
背景颜色：黄色；
宽度：200px；
高度：300px；
溢出y：自动；
}
#内容{
背景颜色：蓝色；
背景：-webkit线性梯度（绿色、蓝色）；
背景：-moz线性梯度（绿色、蓝色）；
背景：-o-线性梯度（绿色、蓝色）；
背景：线性渐变（绿色、蓝色）；
宽度：计算（100%-30px）；
保证金：5px；
高度：计算（100%-30px）；
颜色：白色；
填充：10px；
}

此元素设置为其父元素的宽度减去其边距
由于CSS calc函数，所以它应该非常适合
即使调整了大小。


容器的CSS宽度：


-=10
=200
+=10

容器的总宽度：


-=10
=200
+=10

内容高度


css计算拟合
总数300
css 300

获取信息

css容器宽度
内容器宽度
我理解浏览器返回此值的原因：这是因为他们实际上将滚动条放置在右填充和右边框之间，然后将宽度缩小该量，以便偏移宽度（总宽度）保持不变。即使firefox也会这样做，但它仍然返回原始宽度

我想出了一个似乎对浏览器友好的解决方案。我基本上是通过从offsetWidth中减去计算出的填充和边框来进行计算的，这就得到了内部宽度。

getInnerWidth = function (elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
};

getInnerHeight = function (elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth);
};