Как заставить WebKit перерисовать / перекрасить для распространения изменений стиля?

У меня есть несколько тривиальных JavaScript для изменения стиля:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

Это прекрасно работает с последними версиями FF, Opera и IE, но не работает на последних версиях Chrome и Safari.

Это затрагивает двух потомков, которые, случается, являются родными братьями. Первый брат обновляется, а второй нет. Дочерний элемент второго элемента также имеет фокус и содержит тег , содержащий вышеуказанный код в атрибуте onclick.

В окне Chrome "Инструменты разработчика", если я подтолкну (например, сниму флажок и проверим) какой-либо атрибут какого- либо элемента, второй брат обновится до правильного стиля.

Есть ли обходной путь, позволяющий легко и программно "подтолкнуть" WebKit на правильные действия?

33 ответа

Я хотел бы добавить, что стиль теперь нужно установить на родительском узле .

       sel.parentNode.style.display = 'none';
 sel.parentNode.offsetHeight;
 sel.parentNode.style.display = '';

Это единственное решение, которое сработало для меня в текущей версии Safari (15.6).

Простое решение с помощью jquery:

$el.html($el.html());

или же

element.innerHTML = element.innerHTML;

Был SVG, который не отображался, когда он был добавлен в HTML.

Это можно добавить после того, как элементы svg появятся на экране.

Лучшее решение - использовать:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

и с помощью jQuery:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

это будет правильно отображаться на Chrome.

Это приведет к принудительной перерисовке, избегая мерцания, переделки существующих элементов и любых проблем с макетом...

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}
Другие вопросы по тегам