Anda akan berpikir ini akan menjadi pertanyaan sederhana untuk dijawab, dengan segala hal lain yang dapat dilakukan jQuery. Sayangnya, masalahnya adalah masalah teknis: css: setelah dan: sebelum aturan bukan bagian dari DOM, dan karena itu tidak dapat diubah menggunakan metode DOM jQuery.
Ada yang cara untuk memanipulasi elemen-elemen ini menggunakan JavaScript dan / atau CSS workarounds; mana yang Anda gunakan tergantung pada kebutuhan Anda.
Saya akan mulai dengan apa yang secara luas dianggap sebagai pendekatan "terbaik":
1) Tambah / hapus kelas yang telah ditentukan
Dalam pendekatan ini, Anda sudah membuat kelas di CSS Anda dengan gaya :afteratau :beforegaya yang berbeda . Tempatkan kelas "baru" ini nanti di stylesheet Anda untuk memastikannya menimpa:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Kemudian Anda dapat dengan mudah menambah atau menghapus kelas ini menggunakan jQuery (atau vanilla JavaScript):
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Pro: Mudah diimplementasikan dengan jQuery; dengan cepat mengubah beberapa gaya sekaligus; memberlakukan pemisahan masalah (mengisolasi CSS dan JS Anda dari HTML Anda)
- Cons: CSS harus ditulis sebelumnya, sehingga konten
:beforeatau :aftertidak sepenuhnya dinamis
2) Tambahkan gaya baru langsung ke stylesheet dokumen
Dimungkinkan untuk menggunakan JavaScript untuk menambahkan gaya langsung ke stylesheet dokumen, termasuk :afterdan :beforegaya. jQuery tidak menyediakan jalan pintas yang mudah, tetapi untungnya JS tidak terlalu rumit:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()dan .insertRule()metode terkait didukung dengan cukup baik hari ini.
Sebagai variasi, Anda juga dapat menggunakan jQuery untuk menambahkan stylesheet yang sama sekali baru ke dokumen, tetapi kode yang diperlukan tidak pembersih:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Jika kita berbicara tentang "memanipulasi" nilai-nilai, tidak hanya menambahkannya, kita juga dapat membaca yang ada :afteratau :beforegaya menggunakan pendekatan yang berbeda:
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Kita dapat mengganti document.querySelector('p')dengan $('p')[0]ketika menggunakan jQuery, untuk kode yang sedikit lebih pendek.
- Kelebihan: string apa pun dapat dimasukkan secara dinamis ke dalam gaya
- Cons: gaya asli tidak diubah, hanya diganti; Penggunaan berulang (ab) dapat membuat DOM tumbuh besar secara sewenang-wenang
3) Ubah atribut DOM yang berbeda
Anda juga dapat menggunakan attr()CSS Anda untuk membaca atribut DOM tertentu. ( Jika browser mendukung :before, ia mendukung attr()juga. ) Dengan menggabungkan ini dengan content:beberapa CSS yang disiapkan dengan hati-hati, kami dapat mengubah konten (tetapi bukan properti lain, seperti margin atau warna) dari :beforedan:after secara dinamis:
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Ini dapat dikombinasikan dengan teknik kedua jika CSS tidak dapat dipersiapkan sebelumnya:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Pro: Tidak menciptakan gaya ekstra tanpa akhir
- Kekurangan:
attr dalam CSS hanya dapat diterapkan pada string konten, bukan URL atau warna RGB