Получите высоту элемента минус заполнение, маржа, ширина границы

Кто-нибудь знает, возможно ли получить только высоту элемента (минус вертикальное заполнение, граница и маржа), когда нет объявления встроенной высоты? Мне нужно поддерживать IE8 и выше.

el.style.height не работает, потому что стили устанавливаются во внешней таблице стилей.

el.offsetHeight или el.clientHeight не работает, потому что они содержат не только высоту элемента. И я не могу просто вычесть элемент padding и т.д., Потому что эти значения также заданы в таблице стилей CSS, а не в строке (и поэтому el.style.paddingTop не работает).

Также не удается выполнить window.getComputedStyle(el), потому что IE8 не поддерживает это.

jQuery имеет метод height(), который предлагает это, но я не использую jQuery в этом проекте, плюс я просто хочу знать, как это сделать в чистом JavaScript.

У кого-нибудь есть мысли? Очень ценится.

Ответы

Ответ 1

Здесь вы идете:

var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");

Вышеприведенная версия будет работать в современных браузерах. Проверьте текущие версии браузеров IE.

Кросс-браузер:

try {
 el = window.getComputedStyle(document.getElementById('example'), null)
     .getPropertyValue('height');
} catch(e) {
 el = document.getElementById('example').currentStyle.height;
}

источник

Ответ 2

Здесь решение, которое работает для обоих случаев box-sizing: content-box и border-box.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Работает в IE9 +

Вы можете использовать обнаружение функций

if (!getComputedStyle) { alert('Not supported'); }

Это не будет работать, если элемент display равен inline. Используйте inline-block или используйте getBoundingClientRect.

Ответ 3

Улучшен код Дэн для работы с встроенными элементами (используя offset* вместо client*):

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

Ответ 4

Попробуйте element.currentStyle в IE8. Но помните, что borderRightWidth (borderLeftWidth) возвращает не пиксели, а "тонкие", "средний", "толстый".

Ответ 5

Превратил ответ Дана в функцию

export const innerDemensions = (node) => {
  var computedStyle = getComputedStyle(node)

  let height = node.clientHeight // height with padding
  let width = node.clientWidth // width with padding

  height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)
  width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)
  return { height, width }
}