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 c9ccee2e6ea535a969eb3f532ad9fe89

Atau gunakan jQuery:

var style = document.createElement("style"); 
document.head.appendChild(style); 
sheet = style.sheet; 
sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

5 Ubah suai nilai atribut kandungan unsur pseudo:

$('<style>.red::before{color:green}</style>').appendTo('head');

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

Kaedah 2. Gunakan atribut data-* elemen DOM untuk menukar nilai kandungan:

var latestContent = "修改过的内容";
var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);

六. :before和:after伪元素的常见用法总结：

1. 利用content属性，为元素添加内容修饰：

1） 添加字符串：

使用引号包括一段字符串，将会向元素内容中添加字符串。栗子：

a:after { content: "after content"; }

2） 使用attr()方法，调用当前元素的属性的值：

栗子：

a:after { content: attr(href); }
a:after { content: attr(data-attr); }

3）使用url()方法，引用多媒体文件：

栗子：

a::before { content: url(logo.png); }

4) 使用counter()方法，调用计时器：

栗子：

h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " }

2. 清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

3. 特效妙用：

// CSS代码
a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before, a::after { 
content: "";
transition: all 0.2s;
}
a::before { 
left: 0;
}
a::after { 
right: 0;
}
a:hover::before, a:hover::after { 
position: absolute;
}
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
// HTML代码
<a href="#">我是个超链接</a>

4. 特殊形状的实现：

举个栗子：（譬如对话气泡）

// CSS代码
.tooltip {
position: relative;
display: inline-block;
padding: 5px 10px;
background: #80D4C8;
}
.tooltip:before {
content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -5px;
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #80D4C8;
}
// HTML代码
<div class="tooltip">I'm a tooltip.</div>

:before 和 :after 伪元素结合更多CSS3强大的特性，还可完成非常多有趣的特效和 hack ，这里权当抛砖引玉。

六. 一点小小建议：

伪元素的content属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了SEO优化，最好不要在伪元素中包含与文档相关的内容。

修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。

修改伪元素的content属性的值，建议使用利用DOM的data-*属性来更改。

以上所述是小编给大家介绍的JS控制伪元素的方法汇总，希望对大家有所帮助！