Получить ширину в пикселях от элемента со стилем, установленным в%?

У меня есть этот элемент:

<div style="width: 100%; height: 10px;"></div>

Я хочу получить ширину в пикселях. Я просто попробовал это:

document.getElementById('banner-contenedor').style.width

Возвращает 100%. Можно ли фактически получить ширину элемента в пикселях с помощью javascript?

Ответ 1

document.getElementById('banner-contenedor').clientWidth

Ответ 2

Вы хотите получить вычисленную ширину. Попробуйте: .offsetWidth

(Т.е. this.offsetWidth='50px' или var w=this.offsetWidth)

Вам также может понравиться этот ответ на SO.

Ответ 3

Ни один ответ не делает то, что было задано в vanilla JS, и мне нужен ванильный ответ, поэтому я сделал это сам.

clientWidth включает в себя padding и offsetWidth включает в себя все остальное (jsfiddle link). Вы хотите получить вычисленный стиль (ссылка jsfiddle).

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

EDIT: getComputedStyle является нестандартным. Некоторые браузеры возвращают значение, которое учитывает полосу прокрутки, если элемент имеет один (который, в свою очередь, дает другое значение, чем ширина, установленная в CSS). Если у элемента есть полоса прокрутки, вам придется вручную вычислить ширину, удалив поля и прокладки из offsetWidth.

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

Ответ 4

Вы можете использовать offsetWidth. См. Этот пост и вопрос для получения дополнительной информации.

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

div {border: 1px solid #F00;}

<div style="width: 100%; height: 10px;"></div>

Ответ 5

Попробуйте jQuery:

$("#banner-contenedor").width();

Ответ 6

Этот jQuery работал у меня:

$("#banner-contenedor").css('width');

Это даст вам вычисленную ширину

http://api.jquery.com/css/

Ответ 7

yourItem.style['cssProperty']

таким образом вы можете динамически вызвать строку свойств