Warum benötigen WebKit-Browser einen „Anstoß', um über JavaScript vorgenommene Stiländerungen zu verbreiten?

WebKit Redraw Enigmatic Behavior: Auflösen von Stiländerungen

Im Bereich der Webentwicklung kann die Sicherstellung eines konsistenten Erscheinungsbilds über alle Browser hinweg eine Herausforderung darstellen. Ein solches Problem tritt auf, wenn versucht wird, Stiländerungen mithilfe von JavaScript in WebKit-basierten Browsern (z. B. Chrome, Safari) anzuwenden.

Bedenken Sie den folgenden JavaScript-Code:

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

Dieser Code zielt darauf ab Ändern Sie das Klassenattribut eines Elements mit der ID „my_id“. Allerdings wird in WebKit-Browsern nur das erste betroffene untergeordnete Geschwisterelement aktualisiert, während das zweite unverändert bleibt, auch wenn es sich um unmittelbare Geschwister des geänderten Elements handelt.

Interessant ist, dass in den „Entwicklertools“ von Chrome einfach jedes Element umgeschaltet werden kann Das Attribut eines beliebigen Elements löst die korrekte Darstellung des zweiten Geschwisterelements aus. Dies deutet darauf hin, dass WebKit einen „Anstoß“ benötigt, um Stiländerungen zu verbreiten.

Triviale, aber effektive Lösung

Nachdem wir verschiedene ineffektive Empfehlungen untersucht hatten, entstand eine einfache und elegante Lösung Kommentar von Vasil Dinkov. Um ein Repaint in WebKit zu erzwingen, führen Sie Folgendes aus:

sel.style.display='none';
sel.offsetHeight; // Reference is sufficient, no need to store the value
sel.style.display='';

Diese Technik verbirgt das Element („sel“), liest seine offsetHeight (eine Eigenschaft ungleich Null für nicht ausgeblendete Elemente) und blendet es dann ein das Element. Diese subtile Manipulation löst ein Neuzeichnen aus und überträgt die beabsichtigten Stiländerungen.

Zusätzliche Überlegungen

Es bleibt zu testen, ob diese Lösung auf Stiländerungen über den „Block“ hinaus anwendbar ist. Eigentum. Für die Situation des Autors bot es jedoch eine unkomplizierte und effektive Lösung. Durch die Beseitigung der Inkonsistenz bei der Stilweitergabe wird eine visuell konsistente Webseite über alle WebKit-basierten Browser hinweg gewährleistet.

Das obige ist der detaillierte Inhalt vonWarum benötigen WebKit-Browser einen „Anstoß', um über JavaScript vorgenommene Stiländerungen zu verbreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!