Comment puis-je forcer la repeinture de WebKit pour assurer la propagation du style aux éléments descendants ?

Forcer la repeinture de WebKit pour la propagation du style

Lors de la mise en œuvre de modifications de style JavaScript, les développeurs Web peuvent rencontrer des incohérences entre les navigateurs. Dans les navigateurs basés sur WebKit comme Chrome et Safari, de simples mises à jour du nom de classe d'un élément peuvent ne pas se propager aux descendants.

Ce problème survient lors de la mise à jour des frères et sœurs, le premier frère recevant le nouveau style mais le second restant inchangé. . La présence d'un focus et d'une balise d'ancrage au sein de l'élément affecté complique encore la situation.

Solution de contournement : déclencher la repeinture avec la bascule d'affichage

Pour résoudre ce problème dans WebKit, un Une solution de contournement simple et efficace consiste à basculer la propriété d'affichage de l'élément concerné :

sel.style.display = 'none';
sel.offsetHeight; // Accessing offsetHeight forces a reflow
sel.style.display = '';

Cela déclenche un redessin ou une repeinture. opération, propageant les changements de style à tous les descendants. Il convient de noter qu'il a été confirmé que cette technique fonctionne pour les éléments au niveau du bloc et que son efficacité pour d'autres types d'affichage peut nécessiter une exploration plus approfondie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!