Javascript: 100% минус пикселей

Question

У меня есть div, установленный на 100%, но для того, чтобы он поместился туда, куда мне нужно, мне нужно, чтобы его размер был 100% минус 5 пикселей. Я надеялся, что смогу сделать это с помощью JavaScript.

Мой текущий код выглядит так:

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

но я пытаюсь сделать что-то вроде:

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

Может кто-нибудь помочь мне сделать это. Спасибо.

Answer 1

К сожалению, вы не можете смешивать такие единицы.Как насчет использования отступов:

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 внутри этого контейнера ...

(PS Я не рекомендую давать ID, например, "div" для элемента, это сбивает с толку ...)

Answer 2

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