Coretan javascript memaksa elemen dom redraw/mengecat semula

3 Coretan kod JavaScript untuk memaksa elemen dom redraw/mengecat semula. Sedikit hacky tetapi berguna sebagai usaha terakhir.

menggunakan transit.js

Jika anda menggunakan plugin peralihan seperti transit.js ini juga berfungsi:

CSS:

<span>var element = document.getElementById('id');
</span><span>var n = document.createTextNode(' ');
</span><span>var disp = element.style.display;  // don't worry about previous display style
</span>
element<span>.appendChild(n);
</span>element<span>.style.display = 'none';
</span>
<span>setTimeout(function(){
</span>    element<span>.style.display = disp;
</span>    n<span>.parentNode.removeChild(n);
</span><span>},20); // you can play with this timeout to make it as short as possible</span>

Soalan Lazim (Soalan Lazim) Mengenai Memaksa Elemen Dom Redraw/Repaint

<span>$('#element')
</span>    <span>.transition({ x: '-500px', easing: 'snap', duration:'0' })
</span>    <span>.transition({ x: '0', easing: 'snap', duration:'0' })
</span>    <span>.css('z-index','10');</span>

Apakah elemen dom redraw/mengecat semula dalam JavaScript? Ini sering diperlukan apabila perubahan telah dibuat kepada gaya atau kandungan elemen. Penyemak imbas secara automatik mengendalikan kebanyakan redraws dan mengecat semula, tetapi dalam beberapa kes, anda mungkin perlu mencetuskan proses ini secara manual menggunakan JavaScript. Ini boleh berguna dalam situasi di mana anda ingin memastikan bahawa elemen dikemas kini dengan serta -merta, dan bukannya menunggu kitaran pengecatan semula penyemak imbas. >

Terdapat beberapa sebab mengapa anda mungkin perlu memaksa elemen DOM untuk menyusun semula atau mengecat semula. Salah satu sebab yang sama adalah untuk menetapkan gangguan visual atau anomali yang telah berlaku disebabkan oleh perubahan dalam gaya atau kandungan elemen. Sebab lain adalah untuk memastikan bahawa elemen dikemas kini sebaik sahaja perubahan, dan bukannya menunggu kitaran pengecatan semula penyemak imbas. Ini boleh menjadi sangat berguna dalam situasi di mana anda perlu memberikan maklum balas masa nyata kepada pengguna, seperti dalam permainan atau aplikasi interaktif. 🎜> Anda boleh memaksa elemen DOM untuk menyusun semula atau mengecat semula menggunakan JavaScript dengan membuat perubahan kecil dan sementara ke gaya atau kandungan elemen. Ini akan mencetuskan proses pengecualian pelayar, menyebabkan elemen dikemas kini dengan segera. Berikut adalah contoh mudah:

#element <span>{
</span>     <span>position: absolute;
</span>     <span>right: '-500px';
</span>     z<span>-index: -1;
</span><span>}</span>

var elemen = document.getElementById ('myElement');

element.style.display = 'none';

element.offsetheight; // Tidak perlu menyimpannya di mana -mana sahaja, rujukannya cukup

element.style.display = '';

bolehkah saya memaksa elemen dom untuk menyusun semula/mengecat semula menggunakan jQuery? Ya, anda boleh memaksa elemen DOM untuk menyusun semula atau mengecat semula menggunakan jQuery. Proses ini serupa dengan kaedah JavaScript, tetapi dengan beberapa perbezaan kecil. Berikut adalah contoh:

var $ element = $ ('#myelement');

$ element.hide (). Show (0);

Adakah terdapat masalah atau kelemahan yang berpotensi untuk memaksa elemen DOM untuk menyusun semula/mengecat semula? Juga mempunyai kesan negatif terhadap prestasi. Redrawing dan mengecat semula operasi boleh menjadi intensif sumber, terutamanya untuk unsur-unsur kompleks atau sejumlah besar data. Oleh itu, secara amnya disyorkan untuk menggunakan teknik ini dengan berhati -hati, dan hanya apabila perlu. Redraw dan pengecatan pada dasarnya merujuk kepada proses yang sama: mengemas kini perwakilan visual elemen pada halaman web. Walau bagaimanapun, sesetengah pemaju menggunakan istilah "redraw" untuk merujuk secara khusus kepada perubahan yang mempengaruhi susun atur halaman (seperti mengubah saiz atau kedudukan elemen), sementara "mengecat" merujuk kepada perubahan yang mempengaruhi penampilan unsur ( seperti menukar warna atau imej latar belakangnya). Dari semua elemen pada halaman dengan membuat perubahan kecil dan sementara kepada gaya atau kandungan elemen badan. Walau bagaimanapun, ini perlu dilakukan dengan berhati-hati, kerana ia boleh menjadi sangat intensif sumber dan boleh menyebabkan masalah prestasi. Ya, anda boleh memaksa menyusun semula atau mengecat semula bahagian tertentu halaman dengan mensasarkan elemen DOM tertentu atau kumpulan elemen. Ini boleh dilakukan dengan menggunakan javascript atau jQuery biasa, seperti yang ditunjukkan dalam contoh -contoh di atas. Membuat perubahan kecil dan sementara kepada gaya atau kandungan elemen harus berfungsi dalam semua pelayar moden. Walau bagaimanapun, ia adalah idea yang baik untuk menguji kod anda dalam pelbagai pelayar untuk memastikan keserasian. Redraw atau mengecat semula dengan membuat perubahan kecil dan sementara kepada gaya elemen. Ini boleh dilakukan dengan menambahkan atau mengeluarkan kelas CSS, atau secara langsung mengubahsuai sifat gaya elemen. Walau bagaimanapun, kaedah ini mungkin tidak boleh dipercayai seperti menggunakan JavaScript atau jQuery, kerana ia bergantung kepada enjin rendering CSS pelayar.

Atas ialah kandungan terperinci Coretan javascript memaksa elemen dom redraw/mengecat semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!