Javascript: 100%减去像素

Javascript: 100% minus pixels

本文关键字：像素 100% Javascript      更新时间：2023-09-26

我有一个div设置为100%，但为了适合我需要它去的地方，我真的需要的大小为100% - 5px。我希望我可以通过使用javascript来完成这一点。

我当前的代码看起来像:

document.getElementById('div').style.width='100%';

但是我想做的是:

document.getElementById('div').style.width='100% - 5px';
有谁能帮我完成这件事吗?谢谢你。 
elem = document.getElementById('div');
pElem = elem.parentNode;
pPadding = pElem.style.padding || pElem.style.paddingLeft + pElem.style.paddingRight || 0;
pBorder = pElem.style.borderWidth || pElem.style.borderLeftWidth + pElem.style.borderRightWidth || 0;    
elem.style.width = ( pElem.offsetWidth - pPadding - pBorder - 5 ) + "px";

很遗憾，您不能这样混合使用这些单元。如何使用padding:

var el = document.getElementById("div");
el.style.width = "auto";
el.style.paddingRight = "5px";
或者在你的CSS中: 
#div {
   width: auto;
   padding-right: 5px;
}

你不需要100%的宽度和填充，因为那样的话，盒子的实际内容部分将在100%的填充之外(以及任何填充之外的边界)。如果你使用默认宽度，它应该占用父元素的整个宽度，然后填充将内容向内推。

如果你在想"等一下:我不能使用填充来定位，因为我需要在分配的空间内进一步填充"，那么我想，尽管我不喜欢鼓励分割，你可以创建一个额外的容器div，宽度为全宽，填充为5px，然后把你的div放在那个容器内…

(注:

我不建议给元素一个像"div"这样的ID，这会让人困惑…)

相关文章：