Question

我有一个div设置为100％，但为了适应我需要的地方，我真的需要大小为100％减去5px。我希望我能通过使用javascript来实现这一目标。

我目前的代码如下：

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

但我想做的是：

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

任何人都可以帮助我实现这一目标。谢谢。

Answer 1

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";

Answer 2

遗憾的是，你不能混合这样的单位。如何使用填充：

var el = document.getElementById("div");
el.style.width = "auto";
el.style.paddingRight = "5px";

或者在CSS中：

#div {
   width: auto;
   padding-right: 5px;
}

你不希望宽度为100％和填充，因为那时盒子的实际内容部分将是100％，填充在外面（以及填充之外的任何边框）。如果使用默认宽度，则应占用父元素的整个宽度，然后填充向内推送内容。

如果您正在考虑“等一下：我不能使用填充进行定位，因为我需要在分配的空间内进一步填充”然后我想，就像我讨厌鼓励divitis一样，你可以创建一个额外的容器div使用全宽和5px填充，然后将div放在容器内......

（P.S。我不建议给一个元素提供像“div”这样的ID，这很令人困惑......）

Javascript：100％减去像素

2 个答案: