Untuk memfasilitasi pertanyaan di masa depan, saya telah membaca beberapa informasi dan merangkum metode berikut. Ini hanya terbatas pada JS asli. Jika ada tempat yang salah, tolong tunjukkan! Saya hanya berharap semua orang akan baik -baik saja setelah membacanya!
1. Anda dapat membaca dan menulis gaya elemen dokumen CSS melalui objek gaya objek DOM Node (mis., Objek CSSSTYLEDECLARATION).
Misalnya: var elm = document.geteLementById ('test');
elm.style.color = 'hitam';
2. Langsung membaca dan menulis atribut gaya melalui getAttribute (), setAttribute (), dan removeAttribute () dari objek elemen
Misalnya: elm.setAttribute ('style', 'color: red; line-height: 30px');
3. Melalui properti CSSTEXT dari objek CSSSTYLEDECLARATION, SETPROPERTY (), RemoveProperty dan Metode Lainnya
menyukai:
elm.style.csstext = 'color: red; line-height: 30px'; elm.style.removeproperty ('color'); elm.style.setproperty ('warna', 'hijau', 'penting'); elm.style.csstext = ''; // Cepat hapus semua deklarasi aturan iniBagian Deklarasi Gaya dari setiap aturan CSS (bagian di dalam kawat gigi) adalah objek CSSStyLeClaration, sifat dan metodenya:
milik:
1.CSSTEXT: Semua teks deklarasi gaya dari aturan saat ini. Properti ini dapat dibaca dan ditulis dan dapat digunakan untuk mengatur aturan saat ini.
2.Length: Berapa banyak deklarasi yang dikandung aturan saat ini?
3. Parentrule: Aturan yang berisi aturan saat ini, properti Parentrule dari antarmuka cssrule yang sama.
metode:
1. Metode GetPropertyPriority () mengembalikan prioritas yang ditentukan. Jika ada, itu "penting", jika tidak itu adalah string kosong;
2. Metode GetPropertyValue Mengembalikan nilai yang ditentukan;
3. Metode Item (Indeks) Mengembalikan nama atribut dari posisi yang ditentukan, dan umumnya lebih langsung menggunakan sintaks [indeks];
4. Metode Remoproperty digunakan untuk menghapus properti CSS dan mengembalikan nilai yang dihapus;
5.SetProperty Metode digunakan untuk mengatur atribut CSS yang ditentukan, dan tidak ada nilai pengembalian;
4. Gunakan Atribut Dokumen.Stylesheets untuk mengembalikan semua objek Stylesheet (yaitu, semua lembar gaya) pada halaman saat ini. Ini adalah objek array kelas hanya baca, dan elemennya adalah objek CSSSTYLESHEET (diwarisi dari objek Stylesheet). Metode properti objek ini adalah sebagai berikut:
milik:
1. Objek Array Kelas Cssrules, elemen -elemennya adalah aturan CSS CSStylerule objek dalam lembar gaya; IE9 adalah aturan berikut;
2. Atribut yang dinonaktifkan digunakan untuk membuka atau menutup lembar gaya dengan nilai benar atau dinonaktifkan;
3. Properti OwnerNode Mengembalikan Node Dom di mana objek Stylesheet berada, biasanya <link> atau <tyle>. Untuk stylesheet yang dirujuk oleh stylesheet lain, properti ini nol;
4. Karena perintah @import dari CSS memungkinkan lembaran gaya lain dimuat dalam lembar gaya, properti Parentstylesheet memiliki properti Parentstylesheet, yang mengembalikan lembar gaya yang mencakup lembar gaya saat ini. Jika stylesheet saat ini adalah stylesheet tingkat atas, properti mengembalikan nol;
5. Atribut Jenis Mengembalikan nilai tipe objek Stylesheet, biasanya teks/CSS;
6. Atribut Judul Mengembalikan nilai judul objek Stylesheet;
7. Atribut HREF adalah atribut read-only, yang mengembalikan alamat stylesheet dari koneksi objek stylesheet. Untuk node gaya tertanam, properti ini sama dengan nol;
8. Atribut media menunjukkan apakah gaya gaya ini digunakan untuk layar, cetak, atau keduanya berlaku (semua). Atribut ini hanya baca dan nilai default adalah layar;
Metode: deleterule () menghapus aturan dari lembar gaya, insertrule () memasukkan aturan baru ke dalam lembar gaya, dan IE9 ditambahkan () dan removerule ();
menyukai:
document.stylesheets [0] .InserTrule ('#test: hover {color: white;}', 0); document.stylesheets [0] .deleterule (0); // hapus aturan pertama dalam dokumen style sheet.stylesheets [0] .cssrules [1] .selectortext; // kembalikan dokumen string pemilih.stylesheets [0] .cssrules [1] .csStext; // kembalikan string aturan, termasuk dokumen selector.stylesheets [0] .cssrules [1] .csStext; // mengembalikan semua string deklarasi gaya untuk aturan saat ini5. Gunakan metode GetComputedStyle dari objek jendela. Parameter pertama adalah objek elemen, dan parameter kedua dapat berupa nol, string kosong, atau string elemen pseudo. Metode ini mengembalikan objek csstyledeclaration hanya baca yang mewakili gaya perhitungan. Ini mewakili informasi gaya akhir yang sebenarnya diterapkan pada elemen yang ditentukan, yaitu hasil setelah superposisi berbagai aturan CSS;
Misalnya: var color = window.getComputedStyle (elm, ': sebelum'). Warna;
var color = window.getComputedStyle (elm, ': sebelum'). getPropertyValue ('color');
Atau: var color = window.getComputedStyle (elm, null) .color;
Perbedaan antara objek cssstyledeclaration yang mewakili gaya yang dihitung dan objek cssstyledeclaration yang mewakili gaya inline:
1. Sifat-sifat gaya perhitungan hanya baca;
2. Hitung nilai gaya adalah nilai absolut. Unit relatif seperti persentase dan poin semuanya akan dikonversi menjadi nilai absolut string yang sufiks 'px'. Atribut yang nilainya adalah warnanya akan dikembalikan dalam format "RGB (#,#,#)" atau "RGBA (#,#,#,#)";
3. Jangan menghitung atribut senyawa, tetapi hanya berdasarkan atribut paling dasar, seperti tidak menanyakan margin, tetapi menanyakan margintop saja, dll.;
4. Properti CSStext tidak didefinisikan dalam objek gaya;
5. Gaya perhitungan juga menipu. Saat menggunakannya, Anda perlu memperhatikan nilai pengembalian saat menanyakan atribut tertentu. Misalnya, menanyakan keluarga font;
6. Metode GetComputedStyle tidak didukung di bawah IE9. Objek elemen IE memiliki atribut CurrentStyle;
6. Tambahkan Lembar Gaya secara langsung
1. Buat tag <tyle> untuk menambahkan lembar gaya bawaan
var style1 = document.createElement ('style'); style1.innerHtml = 'body {color: red} #top: hover {background-color: red; color: white;}'; document.head.appendchild (style1);2. Cara lain adalah menambahkan stylesheet eksternal, yaitu, menambahkan node tautan dalam dokumen dan arahkan atribut HREF ke URL dari stylesheet eksternal
var link1 = document.createElement ('link'); link1.setAttribute ('rel', 'stylesheet'); link1.setAttribute ('type', 'text/css'); link1.setAttribute ('href', 'reset-min.css'); document.head.appendchild (link1);7. Metode Window.matchmedia digunakan untuk memeriksa pernyataan media CSS. Versi terbaru dari berbagai browser (termasuk IE 10+) mendukung metode ini. Untuk browser lama yang tidak mendukung metode ini, Anda dapat menggunakan pustaka fungsi pihak ketiga Matchmedia.js;
Berikut adalah contoh dari pernyataan media:
@media all dan (max-device-width: 700px) {body {latar belakang: #ff0;}}Metode Window.matchmedia menerima string pernyataan media sebagai parameter dan mengembalikan objek MediaQueryList. Objek ini memiliki dua properti berikut:
Media: Mengembalikan string pernyataan media kueri.
Pencocokan: Mengembalikan nilai boolean yang menunjukkan apakah lingkungan saat ini cocok dengan pernyataan kueri.
var result = window.matchmedia ('(max-lebar: 700px)'); if (result.matches) {console.log ('lebar halaman kurang dari atau sama dengan 700px'); } else {console.log ('lebar halaman lebih besar dari 700px'); }Objek MediaQueryList yang dikembalikan oleh Window.matchmedia memiliki dua metode untuk mendengarkan peristiwa: Metode AddListener dan metode Removelistener. Jika hasil kueri media berubah, fungsi panggilan balik yang ditentukan dipanggil;
var mql = window.matchmedia ("(max-lebar: 700px)"); mql.addlistener (mqcallback); // tentukan fungsi panggilan balik mqcallback (mqcallback); // undo fungsi callback fungsi callback mqcallback (mql) {if (mql.matches) {// lebar kurang dari atau sama dengan 700 piksel} lain {// width lebih besar dari 700 pikselReferensi untuk artikel ini:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Referensi Javascript Ruan Yifeng: http://javascript.ruanyifeng.com/dom/css.html
Panduan JavaScript otoritatif Edisi Keenam
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.