Haruskah saya memuat css atau js terlebih dahulu?

Cara konvensional untuk memuat JavaScript eksternal (mis. .js_) dan CSS (mis. .css_) file pada halaman adalah menempelkan referensi ke file tersebut di bagian HEAD halaman Anda, misalnya

File yang dipanggil dengan cara ini ditambahkan ke halaman saat ditemukan di sumber halaman, atau secara sinkron. Untuk sebagian besar, pengaturan ini memenuhi kebutuhan kita dengan baik, meskipun dalam dunia pola desain Ajax yang sinkron, kemampuan untuk juga menjalankan JavaScript/CSS sesuai permintaan menjadi semakin berguna. Dalam tutorial ini, mari kita lihat bagaimana hal itu dilakukan

Memuat file JavaScript dan CSS eksternal secara dinamis

Untuk memuat a. js atau. css secara dinamis, singkatnya, itu berarti menggunakan metode DOM untuk terlebih dahulu membuat elemen "SCRIPT" atau "LINK" baru yang megah, menetapkan atribut yang sesuai, dan terakhir, menggunakan element.appendChild() untuk menambahkan elemen ke lokasi yang diinginkan dalam dokumen . Kedengarannya jauh lebih mewah daripada yang sebenarnya. Mari kita lihat bagaimana semuanya bersatu

function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file_Demo. "skripku. js" sumber

var petname="Jerawat"
alert("Nama Hewan Peliharaan. " + nama hewan peliharaan)

"gaya ku. css" sumber

#td yang dapat diturunkan{
warna latar belakang. Kuning muda;
}

#demotable b{
warna. biru;
}

Karena file JavaScript dan CSS eksternal secara teknis dapat diakhiri dengan ekstensi file khusus apa pun (mis. "javascript.php_"), parameter fungsi "function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file0" memungkinkan Anda memberi tahu skrip jenis file apa yang diharapkan sebelum memuat. Setelah itu, fungsi ditetapkan untuk membuat elemen menggunakan metode DOM yang sesuai, menetapkan atribut yang sesuai, dan terakhir, menambahkannya ke akhir bagian HEAD. Sekarang, di mana file yang dibuat ditambahkan perlu dijelaskan lebih lanjut

document.getElementsByTagName("head")[0].appendChild(fileref)

Dengan mereferensikan elemen function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file1 halaman terlebih dahulu, lalu memanggil function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file2, ini berarti elemen yang baru dibuat ditambahkan ke bagian paling akhir dari tag HEAD. Selain itu, Anda harus menyadari bahwa tidak ada elemen yang dirugikan dalam penambahan elemen baru- artinya, jika Anda memanggil function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file3 dua kali, Anda sekarang akan mendapatkan dua elemen "SCRIPT" baru yang keduanya menunjuk ke file JavaScript yang sama. Ini bermasalah hanya dari sudut pandang efisiensi, karena Anda akan menambahkan elemen berlebihan ke halaman dan menggunakan memori browser yang tidak perlu dalam prosesnya. Cara sederhana untuk mencegah file yang sama ditambahkan lebih dari sekali adalah dengan melacak file yang ditambahkan oleh function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file5, dan hanya memuat file jika itu baru

var filesadded="" //list of files already added function checkloadjscssfile(filename, filetype){ if (filesadded.indexOf("["+filename+"]")==-1){ loadjscssfile(filename, filetype) filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc" } else alert("file already added!") } checkloadjscssfile("myscript.js", "js") //success checkloadjscssfile("myscript.js", "js") //redundant file, so file not added_

Di sini saya hanya mendeteksi secara kasar untuk melihat apakah file yang akan ditambahkan sudah ada dalam daftar nama file yang ditambahkan yang disimpan dalam variabel function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file6 sebelum memutuskan apakah akan melanjutkan atau tidak

Oke, lanjutkan, terkadang situasinya mengharuskan Anda benar-benar menghapus atau mengganti yang ditambahkan. js atau. file css. Mari kita lihat bagaimana hal itu dilakukan selanjutnya

Apakah JavaScript memuat sebelum HTML?

Apakah HTML dimuat sebelum CSS?

Apa yang dimuat pertama kali dalam HTML?

Apakah CSS diperlukan untuk JavaScript?