Ширина элемента 100%, как найти реальную ширину элемента в пикселях?

Question

[Александр Шаповал]

Родители тоже в процентах. Нужно простое и лаконичное решение. Спасибо.

Answer 1

[Ernest Faizullin]

$(el).width(); // число в пикселях

https://jsfiddle.net/erniesto77/x21yyyyx/1/

Comments

[Александр Шаповал]

увы оно возвращает 100, и это число не в пикселях, всё потому что строчкой выше я сделал
$(this).attr('width', '100%');

и теперь мне нужно узнать сколько это в пикселях на экране, с учетом того что родитель может иметь любую ширину

[Ernest Faizullin]

Александр Шаповал: width() ни в каком случае не может возвращать число в процентах, просто у вас так совпало, что 100 пикселей это и есть 100%

[Александр Шаповал]

В инспекторе элементов ширина 301px, меняется при изменении ширины экрана

[Ernest Faizullin]

Александр Шаповал: https://jsfiddle.net/erniesto77/x21yyyyx/ в этом примере я тоже задал аттрибут $(content).attr('width', '100%'); потом вывел в консоль $(content).width() и получил число в пикселях

[Ernest Faizullin]

Ernest Faizullin: тут ширину родителя сделал в процентах https://jsfiddle.net/erniesto77/x21yyyyx/1/ результат так же в пикселях

[Александр Шаповал]

Ernest Faizullin: Да, я уже выяснил в чем причина. Спасибо

Answer 2

[Stalker_RED]

как и говорит Ernest Faizullin, .width() отлично работает:

https://jsfiddle.net/9obpsh6m/



Может вы добавляете атрибут width для элемента, на который он не действует?

Comments

[Александр Шаповал]

Да нет, с iframe тут всё впорядке. Масштабирую фрейм:

$('iframe').each(function(){
var width_before = $(this).attr('width'),
height_before = $(this).attr('height');

$(this).attr('width', '100%');

var width_after = $(this).width();
var height_after = (width_after / width_before) * height_before;

$(this).attr('height', height_after);
});

[Stalker_RED]

Александр Шаповал: И что с ним не так?

[Александр Шаповал]

Stalker_RED: Действительно, на jsfiddle всё работает, мой пример в том числе
https://jsfiddle.net/39dqxxvg/

Странно что Ваш пример у меня работает иначе:
responsive-iframes.min.js:22 80% 80
responsive-iframes.min.js:25 50% 50
responsive-iframes.min.js:28 100% 100

У меня почему-то ширина принимается за 100, и высота всегда 56px. Попробую отключить все библиотеки, может поможет найти причину

[Александр Шаповал]

Stalker_RED: Однако. Всё дело в подключенной библиотеке LESS. На продакшене всё работает. Странно

Answer 3

[Zhainar]

element.innerWidth()