Résumé des méthodes pour contrôler les pseudo-éléments dans les compétences JS_javascript

1. Sebab:

Artikel ini berasal daripada soalan dalam komuniti OSC tentang cara menggunakan jq untuk mendapatkan elemen pseudo. Fikiran pertama saya ialah CSS Query yang berkuasa seharusnya boleh mendapatkan elemen pseudo.

Walau bagaimanapun, sebenarnya, Pertanyaan CSS tidak boleh. Iaitu, kita tidak boleh mendapatkan elemen pseudo :before melalui $(":before"), $(dom).find(":before") atau document.querySelector(":before").

Untuk melakukan ini, saya terpaksa memahami semula unsur-unsur pseudo (unsur-unsur Pseudo). Mengapa kita tidak boleh mendapatkan elemen pseudo secara langsung menggunakan JS?

Contohnya, elemen pseudo ::before dan ::after digunakan untuk memasukkan kandungan ke dalam kepala atau ekor elemen dalam pemaparan CSS Mereka tidak terikat dengan dokumen dan tidak menjejaskan dokumen itu sendiri, tetapi hanya menjejaskan gaya akhir. Kandungan tambahan ini tidak akan muncul dalam DOM, tetapi hanya akan ditambah dalam lapisan pemaparan CSS.

Sebenarnya, elemen pseudo boleh dipaparkan oleh penyemak imbas, tetapi ia bukan elemen DOM sendiri. Ia tidak wujud dalam dokumen, jadi JS tidak boleh memanipulasinya secara langsung. Pemilih jQuery semuanya berdasarkan elemen DOM, jadi mereka tidak boleh mengendalikan elemen pseudo secara langsung.

Bagaimana untuk memanipulasi gaya unsur pseudo?

Atas sebab ini, saya memutuskan untuk meringkaskan kaedah mengawal elemen pseudo dalam JS untuk rujukan mudah pada masa hadapan.

2. Apakah unsur pseudo:

Pertama sekali, mari kita bincangkan secara ringkas tentang unsur pseudo. Terdapat enam unsur pseudo, iaitu ::selepas, ::sebelum, ::baris pertama, ::huruf pertama, ::pilihan, ::latar belakang.

Elemen pseudo yang paling biasa digunakan dalam halaman web utama ialah ::selepas dan ::sebelum.

Untuk semantik elemen pseudo ini, sila rujuk artikel saya yang lain "Ringkasan Pemilih Unsur Pseudo CSS".

Dalam CSS3, adalah disyorkan bahawa elemen pseudo menggunakan dua titik bertindih (::) sintaks dan bukannya satu bertindih (:) untuk membezakan kelas-pseudo dan unsur-unsur pseudo. Kebanyakan pelayar menyokong kedua-dua sintaks pembentangan. Hanya ::pilihan sentiasa boleh bermula dengan dua titik bertindih (::). Oleh kerana IE8 hanya menyokong sintaks kolon tunggal, jika anda ingin serasi dengan IE8, cara paling selamat ialah menggunakan satu titik bertindih.

3. Dapatkan nilai atribut unsur pseudo:

Untuk mendapatkan nilai atribut elemen pseudo, anda boleh menggunakan kaedah window.getComputedStyle() untuk mendapatkan objek pengisytiharan gaya CSS bagi elemen pseudo. Kemudian gunakan kaedah getPropertyValue atau terus gunakan akses nilai kunci untuk mendapatkan nilai harta yang sepadan.

Sintaks: window.getComputedStyle(elemen[, pseudoElement])

Parameter

adalah seperti berikut:

elemen (Objek): elemen DOM di mana elemen pseudo terletak

pseudoElement (String): Jenis unsur pseudo. Nilai pilihan ialah: ":after", ":before", ":first-line", ":first-letter", ":selection", ":backdrop";

Contohnya:

// CSS代码
#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

Catatan:

1. Kedua-dua getPropertyValue() dan akses nilai kunci langsung boleh mengakses CSSStyleDeclaration Object. Perbezaan antara mereka ialah:

Untuk atribut apungan, jika anda menggunakan akses nilai kunci, anda tidak boleh menggunakan getComputedStyle(elemen, null).float secara langsung, tetapi cssFloat dan styleFloat; Jika anda menggunakan akses nilai kunci secara langsung, kunci atribut perlu ditulis dalam kes unta, seperti: style.backgroundColor

Kaedah getPropertyValue() tidak perlu ditulis dalam kotak unta (sarung unta tidak disokong), contohnya: style.getPropertyValue("border-top-color"
Kaedah getPropertyValue() disokong dalam IE9+ dan pelayar moden yang lain dalam IE6~8, anda boleh menggunakan kaedah getAttribute() sebaliknya;
2. Elemen pseudo lalai ialah "paparan: sebaris". Jika atribut paparan tidak ditakrifkan, walaupun nilai atribut lebar ditetapkan secara eksplisit kepada saiz tetap seperti "100px" dalam CSS, nilai lebar akhirnya diperoleh masih "auto". Ini kerana lebar dan ketinggian elemen sebaris tidak boleh disesuaikan. Penyelesaiannya adalah untuk mengubah suai atribut paparan elemen pseudo kepada "block", "inline-block" atau lain-lain.

4. Tukar gaya unsur pseudo:

Kaedah 1. Tukar kelas untuk menukar nilai atribut unsur pseudo:

Beri saya contoh:

// CSS代码
.red::before { 
content: "red"; 
color: red; 
}
.green::before { 
content: "green"; 
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');

Kaedah 2. Gunakan insertRule of CSSStyleSheet untuk mengubah suai gaya elemen pseudo:

Beri saya contoh:

document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

Kaedah 3. Masukkan gaya dalaman