如何在Chrome / IE中获得“真”计算的CSS宽度
如何在Chrome / IE中获得“真”计算的CSS宽度
提问于 2015-04-09 15:27:28
当尝试在vanilla JS中实现一个可调整大小的面板时，当面板上有滚动条时，问题就会出现。我做了这个测试小提琴，令我惊讶的是，面板变得更小，而不是更大，当我增加它的宽度。
我建议在JSFiddle这里查看它，这里是http://jsfiddle.net/y3m9Lo17/，但是这里也有代码。
getInnerWidth = function (elem) {
return parseFloat(window.getComputedStyle(elem).width);
};
getExternalWidth = function (elem) {
return elem.offsetWidth - getInnerWidth(elem);
};
setTotalWidth = function (elem, width) {
elem.style.width = (width - getExternalWidth(elem)) + "px";
};
getInnerHeight = function (elem) {
return parseFloat(window.getComputedStyle(elem).height);
};
getExternalHeight = function (elem) {
return elem.offsetHeight - getInnerHeight(elem);
};
setTotalHeight = function (elem, height) {
elem.style.height = (height - getExternalHeight(elem)) + "px";
};
//===========================================================================================
var container = document.getElementById("container");
var content = document.getElementById("content");
minus10css = function () {
container.style.width = (getInnerWidth(container) - 10) + "px";
};
equal200css = function () {
container.style.width = "200px";
};
plus10css = function () {
container.style.width = (getInnerWidth(container) + 10) + "px";
};
minus10 = function () {
setTotalWidth(container, container.offsetWidth - 10);
};
equal200 = function () {
setTotalWidth(container, 200);
};
plus10 = function () {
setTotalWidth(container, container.offsetWidth + 10);
};
cssCalc = function () {
content.style.height = "calc(100% - 30px)";
};
total300 = function() {
setTotalHeight(content, 300);
};
css300 = function() {
content.style.height = "300px";
};#container {
background-color: yellow;
width: 200px;
height: 300px;
overflow-y: auto;
}
#content {
background-color: blue;
background: -webkit-linear-gradient(green, blue);
background: -moz-linear-gradient(green, blue);
background: -o-linear-gradient(green, blue);
background: linear-gradient(green, blue);
width: calc(100% - 30px);
margin: 5px;
height: calc(100% - 30px);
color: white;
padding: 10px;
}<div id="container">
<div id="content">
This element is set to have exactly his parent's width minus its margins
and paddings thanks to the CSS calc function, so it should fit perfectly
even when resized.
</div>
</div>
<br />
<p>CSS width of container:
<br />
<button onclick="minus10css()">-=10</button>
<button onclick="equal200css()">=200</button>
<button onclick="plus10css()">+=10</button>
</p>
<p>Total width of container:
<br />
<button onclick="minus10()">-=10</button>
<button onclick="equal200()">=200</button>
<button onclick="plus10()">+=10</button>
</p>
<p><b style="color: red;">Content height</b>
<br />
<button onclick="cssCalc()">css calc fit</button>
<button onclick="total300()">total 300</button>
<button onclick="css300()">css 300</button>
</p>
<p>Get info<br />
<button onclick="alert(container.style.width)">css container width</button>
<button onclick="alert(getInnerWidth(container))">inner container width</button>
</p>
然后进行了另一个测试，发现getComputedStyle返回的宽度实际上是CSS宽度减去滚动条的宽度。
http://jsfiddle.net/q659gzdc/
document.getElementById("cssWidth").innerHTML = "CSS width = " + document.getElementById("container").style.width;
document.getElementById("computedWidth").innerHTML = "getComputedStyle width = " + window.getComputedStyle(document.getElementById("container")).width;#container {
background-color: yellow;
overflow-y: auto;
}
#content {
background-color: blue;
background: -webkit-linear-gradient(green, blue);
background: -moz-linear-gradient(green, blue);
background: -o-linear-gradient(green, blue);
background: linear-gradient(green, blue);
width: 100%;
height: 200%;
color: white;
}<div id="container" style="width: 200px; height: 200px;">
<div id="content">This element is set to have exactly his parent's width minus its margins and paddings thanks to the CSS calc function, so it should fit perfectly even when resized.</div>
</div>
<span id="cssWidth"></span><br />
<span id="computedWidth"></span>
但是我不能使用elem.style.width属性，因为初始值可以是百分比或calc() css函数，并且是通过类设置的(而不是在元素本身上，因此element.style属性不会有它)。有没有办法“修复”这个Chrome行为，这样我就可以得到200 Is？编辑:这也是IE中的一个问题，但是Firefox返回真正的CSS宽度。
编辑:如果你没有铬来测试这一点，看看这个小提琴：http://jsfiddle.net/y8Y32/25/ chrome的getComputedStyle宽度等于第一段的宽度。
Stack Overflow用户
回答已采纳
发布于 2015-04-09 19:10:59
我理解浏览器为什么返回这个值:这是因为它们实际上在右填充和右边框之间放置滚动条，然后将宽度缩小那么多，使offsetWidth (总宽度)保持不变。即使firefox也是这样做的，但它仍然返回原来的宽度。
我想出了一个似乎对浏览器友好的解决方案。我基本上是通过从offsetWidth中减去计算填充和边框来计算的，这给了我内部的宽度。http://jsfiddle.net/y3m9Lo17/1/
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);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29542731
复制相关文章
相似问题
腾讯云开发者
