Можно ли возвращать значение свойства width элемента в переменную?

Question

[lexaxaxa]

Можно ли возвращать значение свойства width элемента в переменную ? Нужно выразить габариты одного элемента через габариты другого:

var b = window.innerWidth;
var a = document.getElementById("id1").style.width;  // не работает.width id1 задана во внешнем стиле(например=250px)
document.getElementById("id2").style.width = a+"px"; // не работает
document.getElementById("id2").style.width = String(b)+"px"; // все хорошо
document.getElementById("id2").style.width = String(a)+"px"; // не работает
document.getElementById("id2").style.width = "50 px"; // с установкой непосредственного значения нет проблем

Answer 1

[Алексей Уколов]

Должно быть вот так
В document.getElementById("id1").style хранятся значения из атрибута style для этого элемента. Если стили заданы в css, получить к ним доступ через element.style нельзя.
А вообще, если ваши цели не исключительно образовательные, используйте jQuery.

Answer 2

[Евгений Петров]

Вот оно — поколение jQuery... Ничего, кроме библиотек, не знают...

Есть метод глобального объекта getComputedStyle, предназначенный именно для получения стилей из всех источников, включая стили пользователя, агента и описанные в элементе style (подключённые через link), а не только инлайн-стили (описанные в атрибуте style).

Для получения размера элемента по границе border-box в интерфейсе Element существует существует метод getBoundingClientRect, возвращающий объект с координатами границ относительно левого верхнего угла текущей области просмотра (он же viewport).

Также для получения информации о размерах элемента в том же интерфейсе Element есть 3 группы — offset, client и scroll, в каждой из которых по 4 свойства. В данном конкретном случае можно, в зависимости от цели, использовать clientWidth, scrollWidth или offsetWidth. Разница между свойствами — границы области (border-box, padding-box и он же, но без учёта линеек прокрутки).

Написал, и задумался — а кому это надо?..

Comments

[lexaxaxa]

не понимаю как можно начать пользоваться библиотекой не получив понимание ее преимуществ перед "нативным" кодом.например преимущество с++ перед assemler налицо. преимущество vector из stl перед массивом налицо.короче, тот кто пользуется чем-либо должен иметь представление как это создать.я как понял html5 в веб-сфере это как ассемблер в не-веб сферы.но по-мне -квери это просто высокоуровневая обертка высокоуровнего html5

[lexaxaxa]

Евгений, я, будучи новичком, при просмотре доступного исходного кода вконтакте не обнаружил в нем синтаксиса от квери. значит ли это, что разработчики вконтакте ее(jQuerry) не используют или просто она во внешних файлах?

[Евгений Петров]

jQuery — удобная кроссбраузерная работа с самыми часто использующимися разделами DOM (не путайте с HTML). Но не со всеми. Кроме того, не нужно забывать про нативный Javasript, который не входит в интересы jQuery.

Если говорить про получение получения значения правила CSS, то тот же getComputedStyle используется в методе css().
А для получения положения элемента в методе offset() используется упомянутый getBoundingClientRect.
Ну а свойства всех 3-х групп задействованы во многих методах.

[Евгений Петров]

Очень многие проекты не используют jQuery. Есть масса других библиотек и фреймворков. Тот же Angular набирает силу.