Cara menggunakan javascript insertrule css

Anda pasti bertanya-tanya apa sebenarnya kebutuhan untuk menambahkan aturan CSS ke stylesheet dengan Javascript. Cara yang lebih baik adalah dengan meng-hard-code properti CSS di stylesheet?

Terkadang persyaratannya sedemikian rupa sehingga tidak ada pilihan selain menggunakan Javascript untuk menambahkan CSS ke stylesheet

Salah satu kasusnya adalah aturan keyframes CSS. Pertimbangkan aturan CSS di bawah ini.

@keyframes outlightbox
{ 
	0% { 
		height: 100%;
		top: 0px;
	} 
	100% {
		height: 500px;
		top: 50px;
	}
}   

Anda jelas dapat meng-hard-code aturan CSS ini dalam stylesheet. Namun bagaimana bila Anda tidak mengetahui nilai top sebelumnya? . top may be dependent on the initial position of the element, or can be only set after a particular event occurs, or some other complex case.

Menambahkan aturan keyframes ke elemen dengan Javascript atau jQuery tidak dimungkinkan.

// There is no such thing as this 
$("#element").css('keyframes', ....);

Dalam hal ini Anda tidak memiliki pilihan selain menambahkan aturan keyframes secara dinamis ke stylesheet menggunakan Javascript.

Menganimasi Lightbox dengan CSS & Javascript adalah contoh sempurna di mana Anda perlu menambahkan CSS ke stylesheet secara dinamis

Membuat Stylesheet Baru Untuk Menambahkan Aturan CSS

Saat membuat aturan CSS secara dinamis, selalu lebih baik membuat lembar gaya baru, dan menambahkan aturan ke dalamnya. Itu karena menambahkan aturan CSS baru membutuhkan posisi indeks di mana aturan CSS baru akan ditambahkan. Ini relatif lebih sederhana dalam stylesheet baru karena indeks awalnya adalah 0

Membuat dan mendapatkan referensi ke stylesheet baru dengan Javascript

var element = document.createElement('style'),
	sheet;

// Append style element to head
document.head.appendChild(element);

// Reference to the stylesheet
sheet = element.sheet;

Membuat dan mendapatkan referensi ke stylesheet baru dengan jQuery

$("head").append('<style id="new-animations" type="text/css"></style>');

var sheet = $("#new-animations").get(0).sheet;

Menggunakan Stylesheet yang Ada Untuk Menambahkan Aturan CSS

Meskipun tidak disarankan, tetapi demi menunjukkannya, berikut adalah cara mendapatkan referensi ke stylesheet yang ada

Dengan asumsi style sheet adalah bentuk

<style type="text/css" id="new-animations">
......
......
</style>

Dengan Javascript

var sheet = document.getElementById('new-animations').sheet

Dengan jQuery

var sheet = $("#new-animations").get(0).sheet

Menambahkan Aturan CSS Baru di Lembar Gaya Kosong

Anda dapat menyisipkan aturan CSS baru menggunakan metode insertRule .

var styles = '.new-animation {';
styles += 'text-align:right;';
styles += 'line-height:150px !important;'
styles += '}';

// Add the first CSS rule to the stylesheet
sheet.insertRule(styles, 0);

Parameter kedua adalah posisi atau indeks dari aturan CSS pada style sheet. Indeks dimulai dari 0. Anda tidak dapat memberikan posisi sewenang-wenang - indeks aturan CSS baru harus setelah indeks aturan CSS terakhir di stylesheet

Kode di bawah ini akan memberikan error karena setelah indeks ke-0 dimasukkan, kode mencoba memasukkan aturan baru pada indeks ke-2

// In an empty stylesheet, this is incorrect
var styles1 = '.new-animation-1 {';
styles1 += 'line-height:150px;'
styles1 += '}';
sheet.insertRule(styles1, 0);

var styles2 = '.new-animation-2 {';
styles2 += 'line-height:100px;'
styles2 += '}';
sheet.insertRule(styles2, 2);

Setelah posisi ke-0, posisi selanjutnya yang harus diisi adalah 1

Hal lain yang perlu diperhatikan adalah bahwa aturan CSS yang baru disuntikkan mungkin tidak akan terlihat saat Anda menggunakan alat pengembang browser (Elemen Inspeksi). Namun demikian aturan CSS sedang diperbarui di DOM

Menambahkan Aturan CSS Baru di Lembar Gaya yang Ada

Dalam stylesheet yang sudah ada, aturan CSS harus sudah ada. Jadi untuk menambahkan aturan CSS baru, pertama-tama Anda harus menemukan panjang aturan CSS di stylesheet, lalu menggunakannya untuk memasukkan aturan baru

// The no of available CSS rules in the sheet
// This will be the index of the next to-be-added rule
var css_rules_num = sheet.cssRules.length;

sheet.insertRule("#container { margin:5px; }", css_rules_num);

Menghapus Aturan CSS yang Ada

Anda dapat menghapus aturan CSS yang ada menggunakan metode deleteRule .

// There is no such thing as this 
$("#element").css('keyframes', ....);

Perhatikan bahwa setelah penghapusan, indeks properti CSS lainnya di stylesheet akan diatur ulang, seperti halnya menghapus elemen dari array akan mengatur ulang array

Memperbarui Aturan CSS yang Ada

Sangat menarik, memperbarui aturan CSS pada indeks tertentu tidak dimungkinkan. Jika Anda mencoba memasukkan kembali aturan CSS baru pada posisi yang ditempati, kedua aturan CSS tersebut akan diperbarui di DOM. Jadi berhati-hatilah

Jadi untuk memperbarui aturan CSS pada indeks tertentu, pertama-tama hapus aturan lama lalu masukkan aturan baru