Как из JavaScript обновить DOM-елемент?

Question

[Riddik]

Привет.

На некоторых мобильных устройствах после поворотов экрана в разные положения один DOM-элемент становиться слишком маленьким. Не знаю как побороть. Возможно поможет принудительный рефреш, перерисовка.

Какие есть способы? удалить из body и затем тут же добавить?

var bb = document.getElementById('id');
if(bb)
{
         document.body.removeChild(bb);
         document.body.appendChild(bb);
}

Comments

[Riddik]

Дело в том, что это сторонний элемент со стороны заказчика и я никак не могу менять ему стили. К тому же, у него есть псевдоэлементы before и after:

element.style {
    top: 10%;
}
#booster-tab.left, #booster-tab.left:after {
    border-radius: 0 8px 8px 0;
    left: 0;
}
#booster-tab {
    background: none repeat scroll 0 0 #FFF;
    height: 45px;
    position: fixed;
    width: 40px;
    z-index: 99997;
    -moz-transition: all .29s ease 0s;
    -o-transition: all .29s ease 0s;
    -webkit-transition: all .29s ease;
    -webkit-transition-delay: 0s;
    transition: all .29s ease 0s;
}

Лишь на некоторых устройствах он становится очень маленьким и это гадание на кофейной гуще, т.к. отследить этот баг я никак не могу.

Думаю, раз проблема проявляется после изменения ориентации экрана (т.е. перерисовки) то может дело можно поправить перерисовкой всех DOM-ов или именно этого, чтобы он заново просчитался со всеми своими стилями.

Есть варианты?

Answer 1

[Stalker_RED]

В большинстве случаев для redraw достаточно переключить туда-сюда display: none / display: block (или что там у вас). Но есть и множество других свойств, изменение которых вызывает redraw.

Comments

[Riddik]

Спасибо, а есть именно гарантированные способы заставить браузер заново пересчитать размеры и перерисовать элемент? display: none / display: block хватит? Т.е. просто:
element.style.display = 'none';
element.style.display = 'block;
сделает это?

[Stalker_RED]

Вообще, там много слоев абстракции. Всякие repaint, reflow, relayout, restyle.
www.phpied.com/rendering-repaint-reflowrelayout-restyle

Манипуляции с display точно сработают в webkit и gecko. На счет мобильных браузеров не уверен, надо тестировать.
Изменения размеров блока тоже должны сработать. blog.letitialew.com/post/30425074101/repaints-and-...

Answer 2

[Денис Инешин]

Нет нет, это делается через CSS на Media queries. Изучайте: раз и два

Comments

[Riddik]

Спасибо, но не могу менять стили. Нужен способ, который заставит элемент заново просчитаться.

[Денис Инешин]

TrueRiddik: не нужно менять стили, добавьте еще один ксс файл, либо прямо сверху оберните весь новый CSS код в теги style

Answer 3

[keslo]

Вряд ли тут дело в этом. Смотрите стили CSS у этого блока.

Comments

[Riddik]

Стили не могу менять, так как они загружаются со стороны заказчика:
element.style {
top: 10%;
}
#booster-tab.left, #booster-tab.left:after {
border-radius: 0 8px 8px 0;
left: 0;
}
#booster-tab {
background: none repeat scroll 0 0 #FFF;
height: 45px;
position: fixed;
width: 40px;
z-index: 99997;
-moz-transition: all .29s ease 0s;
-o-transition: all .29s ease 0s;
-webkit-transition: all .29s ease;
-webkit-transition-delay: 0s;
transition: all .29s ease 0s;
}

Answer 4

[Arteben]

onresize попробовать, то есть при изменении размеров окна, изменить размеры элементов?

Comments

[Riddik]

А как именно изменить размер этого элемента с такими стилями? Событие изменения размеров окна я отрабатываю, но в том то и вопрос, как именно? Тем более что элемент содержит псевдо элементы, которые никак из js не подхватишь.
Выглядит этот элемент так:


Я не могу менять размеры его :before и :after. Надеюсь что поможет либо удалить/вставить либо изменения размеров, что покажут только тесты

[Riddik]

TrueRiddik: т.е. не изменение размеров, а display

Answer 5

[JSLik]

для удаления-добавления еще есть функция replaceChild - она заменяет старый элемент новым. Но как выше написали, наверное, лучше сделать через media query и css