Подскажите как отследить размер элемента в реальном времени без jquery?
Например есть div1 и есть div2 и я хочу передать второму какую-то часть ширины первого в реальном времени, грубо говоря изменяю первый - изменяется и второй.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите как отследить размер элемента в реальном времени без jquery?
Например есть div1 и есть div2 и я хочу передать второму какую-то часть ширины первого в реальном времени, грубо говоря изменяю первый - изменяется и второй.
Ширину элемента можно получить с помощью window.getComputedStyle. Для IE8 можно использовать element.clientWidth
или .offsetWidth
. Первое свойство также включает в себя padding
, второе — padding
, border
и ширину полосы прокрутки.
Далее, чтобы отследить изменения, в новых браузерах можно использовать Mutation observer. В IE до 11й версии — onpropertychange. Код отслеживания изменений:
function listenerCreate(src, dst){
function changeWidth(){
var newWidth=getDivWidth(src);
if(src.oldWidth!=newWidth){
dst.style.width=src.oldWidth=newWidth;
}
}
src.oldWidth=getDivWidth(src);
if(typeof(MutationObserver) !== 'undefined'){
var MO=new MutationObserver(changeWidth);
MO.observe(src, {
attributes: true,
childList: true,
characterData: true
});
} else {
src.onpropertychange = changeWidth;
}
}
Пример полностью — на JSFiddle. Кстати, любопытный баг: получить CSS-свойство с помощью getComputedStyle из функции на этом сайте можно, лишь добавив к нему пустую строку. Наверное, это как-то связано с фреймами.