Pertanyaan Memilih dan memanipulasi CSS pseudo-elements seperti :: before and :: setelah menggunakan jQuery


Apakah ada cara untuk memilih / memanipulasi elemen pseudo CSS seperti ::before dan ::after (dan versi lama dengan satu titik koma) menggunakan jQuery?

Misalnya, stylesheet saya memiliki aturan berikut:

.span::after{ content:'foo' }

Bagaimana saya bisa mengubah 'foo' menjadi 'bar' menggunakan jQuery?


782
2018-02-18 12:53


asal


Jawaban:


Anda juga bisa meneruskan konten ke elemen pseudo dengan atribut data dan kemudian menggunakan jQuery untuk memanipulasi itu:

Dalam HTML:

<span>foo</span>

Di jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

Di CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

Jika Anda ingin mencegah 'teks lain' muncul, Anda bisa menggabungkan ini dengan solusi seucolega seperti ini:

Dalam HTML:

<span>foo</span>

Di jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

Di CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

606
2018-04-20 17:59



Anda akan berpikir ini akan menjadi pertanyaan sederhana untuk dijawab, dengan segala hal lain yang dapat dilakukan jQuery. Sayangnya, masalahnya ada pada masalah teknis: css: setelah dan: sebelum aturan bukan bagian dari DOM, dan karena itu tidak dapat diubah menggunakan metode DOM jQuery.

Sana adalah cara untuk memanipulasi elemen-elemen ini menggunakan JavaScript dan / atau CSS workarounds; yang mana yang Anda gunakan tergantung pada persyaratan Anda.


Saya akan mulai dengan apa yang secara luas dianggap sebagai pendekatan "terbaik":

1) Tambahkan / hapus kelas yang telah ditentukan

Dalam pendekatan ini, Anda sudah membuat kelas dalam CSS Anda dengan yang berbeda :after atau :before gaya. Tempatkan kelas "baru" 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 JavaScript vanila):

$('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>

  • Kelebihan: Mudah diterapkan dengan jQuery; dengan cepat mengubah banyak gaya sekaligus; memberlakukan pemisahan kekhawatiran (mengisolasi CSS dan JS dari HTML Anda)
  • Cons: CSS harus sudah ditulis sebelumnya, jadi isi dari :before atau :after tidak sepenuhnya dinamis

2) Tambahkan gaya baru secara langsung ke stylesheet dokumen

Anda dapat menggunakan JavaScript untuk menambahkan gaya secara langsung ke stylesheet dokumen, termasuk :after dan :before gaya. jQuery tidak menyediakan jalan pintas yang mudah digunakan, 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 yang terkait .insertRule() metode hari ini cukup didukung dengan baik.

Sebagai variasi, Anda juga dapat menggunakan jQuery untuk menambahkan lembar gaya yang sama sekali baru ke dokumen, tetapi kode yang diperlukan tidak lebih bersih:

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, bukan hanya menambahkannya, kita juga bisa Baca baca yang ada :after atau :before gaya 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>

Kami bisa mengganti document.querySelector('p') dengan $('p')[0] saat 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 ditimpa; penggunaan berulang (ab) dapat membuat DOM tumbuh besar secara sewenang-wenang

3) Ubah atribut DOM yang berbeda

Anda juga bisa menggunakan attr() di CSS Anda untuk membaca atribut DOM tertentu. (Jika browser mendukung :before, mendukung attr() demikian juga.) Dengan menggabungkan ini dengan content:di beberapa CSS yang disiapkan dengan hati-hati, kita dapat mengubah konten (tapi bukan properti lain, seperti margin atau warna) dari :before dan :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>

  • Kelebihan: Tidak menciptakan gaya ekstra tanpa akhir
  • Cons:  attr dalam CSS hanya dapat berlaku untuk string konten, bukan URL atau warna RGB

391
2018-02-11 18:14



Meskipun mereka diberikan oleh browser melalui CSS seolah-olah mereka seperti elemen DOM asli lainnya, pseudo-elements sendiri bukan bagian dari DOM, karena pseudo-elements, seperti namanya, bukan elemen nyata, dan karena itu Anda tidak bisa pilih dan memanipulasinya secara langsung dengan jQuery (atau apa saja API JavaScript dalam hal ini, bahkan bukan Selectors API). Ini berlaku untuk setiap elemen pseudo yang gayanya ingin Anda ubah dengan skrip, dan bukan hanya ::before dan ::after.

Anda hanya dapat mengakses gaya pseudo-elemen secara langsung saat runtime melalui CSSOM (pikirkan window.getComputedStyle()), yang tidak diekspos oleh jQuery di luar .css(), metode yang tidak mendukung unsur-pseudo juga.

Anda selalu dapat menemukan cara lain di sekitarnya, misalnya, misalnya:

  • Menerapkan gaya ke elemen pseudo dari satu atau lebih kelas sewenang-wenang, lalu beralih antar kelas (lihat jawaban seucolega untuk contoh cepat) - ini adalah cara idiomatis karena memanfaatkan pemilih sederhana (yang elemen-pseudo tidak) untuk membedakan antara elemen dan status elemen, cara mereka dimaksudkan untuk digunakan

  • Memanipulasi gaya yang diterapkan ke elemen-elemen pseudo tersebut, dengan mengubah stylesheet dokumen, yang jauh lebih dari peretasan


144
2018-02-18 12:56



Anda tidak dapat memilih elemen pseudo di jQuery karena mereka bukan bagian dari DOM. Tetapi Anda dapat menambahkan kelas khusus ke elemen ayah dan mengontrol elemen pseudo di CSS.

CONTOH

Di jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

Di CSS:

span.change:after { content: 'bar' }

72
2018-03-17 06:46



Sesuai dengan apa yang disarankan oleh orang Kristen, Anda juga dapat melakukan:

$('head').append("<style>.span::after{ content:'bar' }</style>");

34
2017-10-18 10:20



Berikut ini cara mengakses: setelah dan: sebelum properti gaya, didefinisikan dalam css:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

20
2017-07-15 21:55



Saya telah menjawab pertanyaan ini sini sudah, tetapi untuk menjadi super keren, saya akan mengulang sendiri untuk Anda.

Jawabannya seharusnya Ya Tidak. Anda tidak dapat memilih elemen melalui pseudo-selector, tetapi Anda dapat menambahkan aturan baru ke stylesheet Anda dengan javascript.

Saya membuat sesuatu yang seharusnya bekerja untuk Anda:

var addRule = function(sheet, selector, styles) {
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
};

addRule(document.styleSheets[0], "body:after", "content: 'foo'");

http://fiddle.jshell.net/MDyxg/1/


12
2018-05-12 12:18



JIKA Anda ingin memanipulasi :: before or :: after sudo elements seluruhnya melalui CSS, Anda bisa melakukannya JS. Lihat di bawah;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

Perhatikan bagaimana <style> elemen memiliki ID, yang dapat Anda gunakan untuk menghapusnya dan menambahkannya lagi jika gaya Anda berubah secara dinamis.

Dengan cara ini, elemen Anda adalah gaya persis seperti yang Anda inginkan melalui CSS, dengan bantuan JS.


11
2018-06-14 20:13



satu cara kerja tetapi tidak sangat efisien adalah menambahkan aturan ke dokumen dengan konten baru dan merujuknya dengan kelas. tergantung pada apa yang dibutuhkan kelas mungkin memerlukan id unik untuk setiap nilai dalam konten.

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

5
2017-09-12 13:27



Berikut ini HTML-nya:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

Gaya yang dihitung pada 'sebelum' adalah content: "VERIFY TO WATCH";

Berikut adalah dua baris jQuery saya, yang menggunakan ide menambahkan kelas ekstra untuk secara khusus mereferensikan elemen ini dan kemudian menambahkan tag gaya (dengan tag penting!) Untuk mengubah CSS dari nilai konten sudo-elemen:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");


5
2018-03-18 23:27



Terima kasih semua! saya berhasil melakukan apa yang saya inginkan: D http://jsfiddle.net/Tfc9j/42/ disini lihatlah

saya ingin memiliki opacity dari div luar menjadi berbeda dari opacity div internal dan perubahan itu dengan klik di suatu tempat;) Terima kasih!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}


<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   


</div>

4
2017-07-10 15:26