Memilih dan memanipulasi elemen pseudo CSS seperti :: before dan

943

Apakah ada cara untuk memilih / memanipulasi elemen pseudo-CSS seperti ::beforedan::after (dan versi lama dengan satu semi-colon) menggunakan jQuery?

Misalnya, stylesheet saya memiliki aturan berikut:

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

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

javascript jquery css jquery-selectors pseudo-element JBradwell
sumber

4

Saya membuat sesuatu yang bisa digunakan untuk Anda: gist.github.com/yckart/5563717

yckart

1

Saya benci komentar seperti itu pada stackoverflow yang akan saya tulis (di mana komentator bertanya mengapa Anda tidak melakukannya dengan cara yang benar-benar berlawanan? ), Tetapi: pada satu titik orang harus menyadari masalah desain kode dan mengganti elemen pseudo itu dengan rentang atau sesuatu. Saya kira Anda tahu apa yang saya tunjukkan.

zsitro

1

Jawaban yang diterima sangat bagus. Meskipun jika Anda mencoba untuk mencapai salah satu dari poin-poin berikut, jawabannya tidak akan bekerja: 1. ubah gaya: sebelumnya oleh JS. 2. ubah konten: sebelum oleh JS Silakan lihat jawaban saya untuk itu jika Anda membutuhkannya.

Learner

Lihat github.com/guest271314/pseudo/blob/master/pseudo.js

guest271314

@Pelajar Sekarang ada jawaban untuk semua ini: stackoverflow.com/a/49618941/8620333

Temani Afif

695

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');
});

Dalam CSS:

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

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

Dalam HTML:

<span>foo</span>

Di jQuery:

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

Dalam CSS:

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

Nick Kline
sumber

2

Apakah Anda memiliki tautan dalam spesifikasi untuk menggunakan attrfungsi itu terhadap contentproperti? Saya terkejut saya belum pernah mendengar ini ...

Kevin Peno

95

+1 untuk attr(), sayang sekali saya tidak dapat menggunakannya dengan properti selain content. Demo

Maksim Vi.

28

Itu karena belum ada browser yang menerapkan attr()lebih dari CSS2, sedangkan di CSS2 itu sendiri attr()hanya didefinisikan untuk contentproperti.

BoltClock

10

Link diperbarui untuk Referensi Atribut: w3.org/TR/css3-values/#attr-notation

5

@Johannes Jika browser mendukung :before, ia mendukung attr()dalam CSS

Blazemonger

477

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');
});

Tampilkan cuplikan kode

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

Luaskan cuplikan

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+'";');

Tampilkan cuplikan kode

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>

Luaskan cuplikan

.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');

Tampilkan cuplikan kode

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>

Luaskan cuplikan

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');

Tampilkan cuplikan kode

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>

Luaskan cuplikan

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');
});

Tampilkan cuplikan kode

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

Luaskan cuplikan

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);
});

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Pro: Tidak menciptakan gaya ekstra tanpa akhir
Kekurangan: attr dalam CSS hanya dapat diterapkan pada string konten, bukan URL atau warna RGB

Blazemonger
sumber

2

Saya mencoba untuk secara dinamis menetapkan nilai-nilai glyphicon (yaitu, melalui nilai hex mereka) di :: after psedo. content: element (mis. content: "\ e043";). tampaknya tidak bekerja untuk saya, jadi saya berasumsi itu tidak berfungsi untuk nilai hex untuk glyphicons juga?

user2101068

@ user2101068 Anda harus memposting itu sebagai pertanyaan baru. Saya harus melihat semua kode yang Anda gunakan.

Blazemonger

Blazemonger, terima kasih atas balasan cepatnya .. sayangnya ada sedikit kode dan akan butuh sedikit usaha untuk menghapus kode yang relevan. Saya sudah menghabiskan 12+ jam mencoba untuk mendapatkan pekerjaan ini dan ini adalah usaha terkesiap saya terakhir untuk membuatnya bekerja. Saya perlu memotong kerugian saya. Saya berharap Anda bisa memverifikasi asumsi saya: nilai hex ketika menggunakan teknik yang Anda jelaskan di # 3 di atas (sebelum cuplikan kode). Saya bisa menyisipkan string hex dalam elemen konten tetapi ini menampilkan teks untuk nilai hex glyphicon daripada glyphicon yang sebenarnya. Tayangan tanpa melihat semua kode?

user2101068

1

@ user2101068 Jangan gunakan string hex; sebagai gantinya, salin dan tempel karakter Unicode yang sebenarnya ke atribut HTML. jsfiddle.net/mblase75/Lcsjkc5y

Blazemonger

mengenai solusi 2. & 3. sebenarnya Anda dapat mencegah stylesheet dari (over) tumbuh jika Anda menggunakan: document.styleSheets [0] .insertRule (aturan, indeks), lalu menggunakan indeks ini Anda dapat menghapus aturan ketika tidak diperlukan: dokumen. styleSheets [0] .deleteRule (index)

Picard

158

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

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

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

Menerapkan gaya pada elemen pseudo dari satu atau beberapa kelas arbitrer, lalu beralih di antara kelas (lihat jawaban seucolega untuk contoh cepat) - ini adalah cara idiomatis karena menggunakan penyeleksi sederhana (yang elemen pseudo tidak) untuk membedakan antara elemen dan status elemen, cara mereka dimaksudkan untuk digunakan
Memanipulasi gaya yang diterapkan ke kata elemen semu, dengan mengubah stylesheet dokumen, yang jauh lebih dari peretasan

BoltClock
sumber

78

Anda tidak dapat memilih elemen semu di jQuery karena mereka bukan bagian dari DOM. Tapi Anda bisa menambahkan kelas tertentu ke elemen ayah dan mengontrol elemen semu di CSS.

CONTOH

Di jQuery:

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

Dalam CSS:

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

Gustavo Sousa
sumber

48

Kita juga dapat mengandalkan properti khusus (alias variabel CSS) untuk memanipulasi elemen semu. Kita dapat membaca dalam spesifikasi bahwa:

Properti kustom adalah properti biasa, sehingga mereka dapat dideklarasikan pada setiap elemen, diselesaikan dengan yang normal warisan dan kaskade aturan , bisa dibuat bersyarat dengan @media dan aturan bersyarat lainnya, dapat digunakan dalam atribut gaya HTML , dapat membaca atau set menggunakan CSSOM , dll.

Mempertimbangkan hal ini, idenya adalah untuk mendefinisikan properti kustom dalam elemen dan elemen pseudo akan mewarisinya; dengan demikian kita dapat dengan mudah memodifikasinya.

1) Menggunakan gaya inline :

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

<div class="box"></div>
<div class="box" style="--color:blue;--content:'I am a blue element'"></div>
<div class="box" style="--color:black"></div>
<div class="box" style="--color:#f0f;--content:'another element'"></div>

Luaskan cuplikan

2) Menggunakan CSS dan kelas

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

.blue {
  --color:blue;
  --content:'I am a blue element';
}
.black {
  --color:black;
}

<div class="box"></div>
<div class="box black" ></div>
<div class="box blue"></div>

Luaskan cuplikan

3) Menggunakan javascript

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");
document.querySelectorAll('.box')[1].style.setProperty("--content", "'I am another element'");

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

<div class="box"></div>
<div class="box"></div>

Luaskan cuplikan

4) Menggunakan jQuery

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
   with older version we can use style attribute to set the value. Simply pay
   attention if you already have inline style defined! 
*/
$('.box').eq(1).attr("style","--color:#f0f");

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Luaskan cuplikan

Itu juga dapat digunakan dengan nilai-nilai kompleks:

.box {
  --c:"content";
  --b:linear-gradient(red,blue);
  --s:20px;
  --p:0 15px;
}

.box:before {
  content: var(--c);
  background:var(--b);
  color:#fff;
  font-size: calc(2 * var(--s) + 5px);
  padding:var(--p);
}

<div class="box"></div>

Luaskan cuplikan

Anda mungkin memperhatikan bahwa saya sedang mempertimbangkan sintaksis di var(--c,value)mana valuenilai default dan juga disebut nilai fallback.

Dari spesifikasi yang sama kita dapat membaca:

Nilai properti kustom dapat diganti dengan nilai properti lain dengan fungsi var (). Sintaks var () adalah:

var() = var( <custom-property-name> [, <declaration-value> ]? )

Argumen pertama ke fungsi adalah nama properti kustom yang akan diganti. Argumen kedua ke fungsi, jika disediakan, adalah nilai fallback, yang digunakan sebagai nilai substitusi ketika properti kustom yang dirujuk tidak valid.

Dan kemudian:

Untuk mengganti var () dalam nilai properti:

Jika properti kustom bernama oleh argumen pertama ke var()fungsi adalah animasi-tercemar, danvar() fungsi tersebut sedang digunakan dalam properti animasi atau salah satu dari longhand-nya, memperlakukan properti kustom sebagai memiliki nilai awal untuk sisa dari algoritma ini.

Jika nilai properti kustom yang dinamai oleh argumen pertama ke var()fungsi adalah apa pun kecuali nilai awal, gantivar() fungsi dengan nilai properti kustom yang sesuai.

Jika tidak, jika var()fungsi memiliki nilai fallback sebagai argumen kedua, ganti var()fungsi dengan nilai fallback. Jika adavar() referensi di fallback, gantikan juga.

Jika tidak, properti yang mengandung var()fungsi tidak valid pada waktu nilai komputasi.

Jika kami tidak menetapkan properti khusus ATAU kami mengaturnya ke initialATAU itu berisi nilai yang tidak valid maka nilai fallback akan digunakan. Penggunaan initialdapat membantu jika kita ingin mengatur ulang properti khusus ke nilai standarnya.

Terkait

Bagaimana cara menyimpan nilai inherit di dalam properti khusus CSS (alias variabel CSS)?

Properti khusus CSS (variabel) untuk model kotak

^{Harap dicatat bahwa variabel CSS mungkin tidak tersedia di semua browser yang Anda anggap relevan (misalnya IE 11): https://caniuse.com/#feat=css-variables}

Temani Afif
sumber

@akalata ya, kode ini memerlukan versi jQuery 3.x .. Saya menambahkan rincian lebih lanjut dan alternatif lain dengan jQuery;)

Temani Afif

Bagaimana ini akan tampil di IE 11?

connexo

1

@connexo menyukai fitur bagus dan modern .. itu tidak didukung dan tidak akan berfungsi caniuse.com/#feat=css-variables

Temani Afif

Ofc Saya tahu itu dan karena IE 11 masih sangat relevan, saya melewatkan informasi itu tepat di bagian pengantar jawaban Anda.

connexo

1

Jawaban ini adalah tutorial mendalam terkait dan memodifikasi elemen semu dengan JavaScript menggunakan Variabel CSS. Terima kasih banyak atas waktu dan berbagi teknik yang sangat berharga ini.

LebCit

37

Sejalan dengan apa yang disarankan Christian, Anda juga bisa melakukan:

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

Ivan Chaer
sumber

2

Di sini harus ditambahkan atribut-id, sehingga elemen dapat dipilih dan dihapus sebelum yang baru ditambahkan. Jika tidak, akan muncul banyak style-node yang tidak perlu.

KS

24

Berikut cara untuk mengakses: setelah dan: sebelum properti style, 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');

Nedudi
sumber

11

JIKA Anda ingin memanipulasi :: sebelum atau :: setelah elemen sudo sepenuhnya 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.

sumber

6

satu cara yang berfungsi tetapi tidak terlalu efisien adalah dengan menambahkan aturan ke dokumen dengan konten baru dan merujuknya ke 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');

Kristen
sumber

5

Ini HTML-nya:

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

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

Berikut adalah dua baris jQuery saya, yang menggunakan gagasan menambahkan kelas tambahan 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>");

Anjing hutan
sumber

5

Terima kasih semua! saya berhasil melakukan apa yang saya inginkan: D http://jsfiddle.net/Tfc9j/42/ di sini kita lihat

Saya ingin opacity div luar 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>

aimiliano
sumber

Jangan mencoba append, gunakan htmlyang terbaik cegah

KingRider

1

Awas: di sini Anda menambahkan tag gaya ke kepala setiap kali salah satu klik ditangani. Saya akan kode cara untuk menghapus yang lama sebelum menambahkan yang baru.

pupitetris

3

Anda dapat membuat properti palsu atau menggunakan yang sudah ada dan mewarisinya dalam stylesheet pseudo-element.

var switched = false;

// Enable color switching
setInterval(function () {
    var color = switched ? 'red' : 'darkred';
    var element = document.getElementById('arrow');
    element.style.backgroundColor = color;
    
    // Managing pseudo-element's css
    // using inheritance.
    element.style.borderLeftColor = color;
    
    switched = !switched;
}, 1000);

.arrow {
    /* SET FICTIONAL PROPERTY */
    border-left-color:red;
    
    background-color:red;
    width:1em;
    height:1em;
    display:inline-block;
    position:relative;
}
.arrow:after {
    border-top:1em solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
    border-left:1em solid transparent;
    
    /* INHERIT PROPERTY */
    border-left-color:inherit;
    
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
    top:-50%;
}

<span id="arrow" class="arrow"></span>

Luaskan cuplikan

Tampaknya itu tidak berfungsi untuk properti "content" :(

Alexander Shutau
sumber

3

Ini tidak praktis karena saya tidak menulis ini untuk penggunaan dunia nyata, hanya untuk memberi Anda contoh tentang apa yang dapat dicapai.

css = {
before: function(elem,attr){ 

if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
} else {
 $("#cust_style").remove();
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
}

}, after: function(elem,attr){
if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 

} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 
}
}
}

ini saat ini menambahkan a / atau menambahkan elemen Style yang berisi atribut yang diperlukan Anda yang akan mempengaruhi elemen target setelah elemen Pseudo.

ini dapat digunakan sebagai

css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

dan

css.before( ... ); // to affect the before pseudo element.

seperti setelah: dan sebelumnya: elemen pseudo tidak dapat diakses langsung melalui DOM, saat ini tidak mungkin untuk mengedit nilai-nilai spesifik dari css secara bebas.

cara saya hanyalah contoh dan itu tidak baik untuk latihan, Anda dapat memodifikasinya coba beberapa trik Anda sendiri dan membuatnya benar untuk penggunaan dunia nyata.

jadi lakukan eksperimen Anda sendiri dengan ini dan orang lain!

salam - Adarsh Hegde.

Adarsh Hegde
sumber

3

Saya selalu menambahkan fungsi utils saya sendiri, yang terlihat seperti ini.

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

atau memanfaatkan Fitur ES6:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

Orlandster
sumber

2

Mengapa menambahkan kelas atau atribut ketika Anda bisa menambahkan a styleto head

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

Gaurav Aggarwal
sumber

2

Ada banyak jawaban di sini tetapi tidak ada jawaban yang membantu memanipulasi css dari :beforeatau :after, bahkan yang tidak diterima.

Inilah cara saya mengusulkan untuk melakukannya. Mari kita anggap HTML Anda seperti ini:

<div id="something">Test</div>

Dan kemudian Anda mengatur: sebelum di CSS dan mendesainnya seperti:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Harap perhatikan bahwa saya juga mengatur contentatribut pada elemen itu sendiri sehingga Anda dapat menghapusnya nanti. Sekarang ada buttonklik di mana, Anda ingin mengubah warna: sebelum menjadi hijau dan ukuran font-nya menjadi 30px. Anda dapat mencapainya sebagai berikut:

Tentukan css dengan gaya yang Anda butuhkan di beberapa kelas .activeS:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Sekarang Anda dapat mengubah: sebelum gaya dengan menambahkan kelas ke elemen Anda: sebelum sebagai berikut:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

Jika Anda hanya ingin mendapatkan konten :before, itu bisa dilakukan sebagai:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

Pada akhirnya, jika Anda ingin mengubah :beforekonten secara dinamis dengan jQuery, Anda dapat mencapainya sebagai berikut:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

Mengklik tombol "changeBefore" di atas akan mengubah :beforekonten #somethingmenjadi '22' yang merupakan nilai dinamis.

Saya harap ini membantu

Pelajar
sumber

1

Saya memanfaatkan variabel yang didefinisikan di :rootdalam CSSuntuk memodifikasi elemen pseudo:after (yang sama berlaku untuk :before) , khususnya untuk mengubah nilai untuk gaya yang ditentukan oleh dan nilai untuk yang lain ( ) dalam demo berikut yang menghasilkan warna acak dengan menggunakan JavaScript / jQuery:background-coloranchor.sliding-middle-out:hover:aftercontentanchor#reference

HTML

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
  <a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

CSS

:root {
    --anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: var(--anchorsFg);
    outline: 0;
    font-style: italic;

    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -ms-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background-color: transparent;

    -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background-color: var(--anchorsFg);
    outline: 0;
}
#reference {
  margin-top: 20px;
}
.sliding-middle-out:before {
  content: attr(data-content);
  display: attr(data-display);
}

JS / jQuery

var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
    $( ":root" ).css({"--anchorsFg" : anchorsFg});
});

$( "#reference" ).hover(
 function(){
    $(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
 },
 function(){
    $(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
 }
);

Riccardo Volpe
sumber

Dukungan untuk attr()kecuali dalam content, sangat langka. Anda dapat memeriksa caniuse.com untuk itu. :rootdan dukungan css-variable lebih baik, tetapi penyebarannya masih belum begitu luas karena dukungan untuk itu cukup baru. (juga periksa dukungan untuk itu di caniuse.com)

BananaAcid

1

Saya telah membuat plugin jQuery untuk menambahkan aturan css-pseudo seperti menggunakan .css()elemen tertentu.

kode plugin dan test case adalah di sini
gunakan case sebagai popup gambar css sederhana di sini

pemakaian:

$('body')
  .css({
    backgroundColor: 'white'
  })
  .cssPseudo('after', {
    content: 'attr(title) ", you should try to hover the picture, then click it."',
    position: 'absolute',
    top: 20, left: 20  
  })
  .cssPseudo('hover:after', {
    content: '"Now hover the picture, then click it!"'
  });

BananaAcid
sumber

0

 $('.span').attr('data-txt', 'foo');
        $('.span').click(function () {
         $(this).attr('data-txt',"any other text");
        })

.span{
}
.span:after{ 
  content: attr(data-txt);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>

Luaskan cuplikan

Tariq Javed
sumber

0

Anda dapat menggunakan plugin saya untuk tujuan ini.

JQuery:

(function() {
  $.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      for (var element of parameters.elements.get()) {
        if (!element.pseudoElements) element.pseudoElements = {
          styleSheet: null,
          before: {
            index: null,
            properties: null
          },
          after: {
            index: null,
            properties: null
          },
          id: null
        };

        var selector = (function() {
          if (element.pseudoElements.id !== null) {
            if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
            return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
          } else {
            var id = $.pseudoElements.length;
            $.pseudoElements.length++

              element.pseudoElements.id = id;
            element.setAttribute('data-pe--id', id);

            return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
          };
        })();

        if (!element.pseudoElements.styleSheet) {
          if (document.styleSheets[0]) {
            element.pseudoElements.styleSheet = document.styleSheets[0];
          } else {
            var styleSheet = document.createElement('style');

            document.head.appendChild(styleSheet);
            element.pseudoElements.styleSheet = styleSheet.sheet;
          };
        };

        if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
          element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
        };

        if (typeof parameters.argument === 'object') {
          parameters.argument = $.extend({}, parameters.argument);

          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
          };

          var properties = '';

          for (var property in parameters.argument) {
            if (typeof parameters.argument[property] === 'function')
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
            else
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
          };

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        } else if (parameters.argument !== undefined && parameters.property !== undefined) {
          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = {};
          };

          if (typeof parameters.property === 'function')
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
          else
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

          var properties = '';

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        };
      };

      return $(parameters.elements);
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var element = $(parameters.elements).get(0);

      var windowStyle = window.getComputedStyle(
        element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (element.pseudoElements) {
        return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  $.fn.cssBefore = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
  $.fn.cssAfter = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'after',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  $('.element').cssBefore('content', '"New before!"');
});

.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element"></div>

Luaskan cuplikan

Nilai harus ditentukan, seperti pada fungsi normal jQuery.css

Selain itu, Anda juga bisa mendapatkan nilai parameter elemen semu, seperti pada fungsi normal jQuery.css:

console.log( $(element).cssBefore(parameter) );

JS:

Tampilkan cuplikan kode

(function() {
  document.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        },
        id: null
      };

      var selector = (function() {
        if (parameters.element.pseudoElements.id !== null) {
          if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
          return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
        } else {
          var id = document.pseudoElements.length;
          document.pseudoElements.length++

            parameters.element.pseudoElements.id = id;
          parameters.element.setAttribute('data-pe--id', id);

          return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
        };
      })();

      if (!parameters.element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
        parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        parameters.argument = (function() {
          var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};

          for (var property in parameters.argument) {
            cloneObject[property] = parameters.argument[property];
          };

          return cloneObject;
        })();

        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          if (typeof parameters.argument[property] === 'function')
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
          else
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {
        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
        };

        if (typeof parameters.property === 'function')
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
        else
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

        var properties = '';

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      };
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var windowStyle = window.getComputedStyle(
        parameters.element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (parameters.element.pseudoElements) {
        return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  Object.defineProperty(Element.prototype, 'styleBefore', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'before',
        argument: argument,
        property: property
      });
    }
  });
  Object.defineProperty(Element.prototype, 'styleAfter', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'after',
        argument: argument,
        property: property
      });
    }
  });
})();

document.querySelector('.element').styleBefore('content', '"New before!"');

.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}

<div class="element"></div>

Luaskan cuplikan

^{GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/}

Yuri
sumber

0

Orang lain berkomentar menambahkan elemen kepala dengan elemen gaya penuh dan itu tidak buruk jika Anda hanya melakukannya sekali tetapi jika Anda perlu mengatur ulang lebih dari sekali Anda akan berakhir dengan satu ton elemen gaya. Jadi untuk mencegah hal itu saya membuat elemen style kosong di kepala dengan id dan ganti innerHTML seperti ini:

<style id="pseudo"></style>

Maka JavaScript akan terlihat seperti ini:

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

Sekarang dalam kasus saya, saya perlu ini untuk mengatur ketinggian elemen sebelum berdasarkan ketinggian yang lain dan itu akan berubah pada mengubah ukuran sehingga menggunakan ini saya dapat menjalankan setHeight()setiap kali jendela diubah ukurannya dan itu akan menggantikan dengan <style>benar.

Harapan itu membantu seseorang yang terjebak berusaha melakukan hal yang sama.

zfb
sumber

-1

Saya memiliki sesuatu yang berbeda untuk Anda yang mudah dan efektif.

    <style> 
    .case-after:after { // set your properties here like eg: 
        color:#3fd309 !important; 
     } 
     .case-before:before { // set your properties here like eg: 
        color:#151715 !important; 
     }
 </style>
  // case for after
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-after');
    });

     // case for before
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-before');
    });

Coding_snakeZ
sumber

Memilih dan memanipulasi elemen pseudo CSS seperti :: before dan :: after menggunakan jQuery

Jawaban:

1) Tambah / hapus kelas yang telah ditentukan

2) Tambahkan gaya baru langsung ke stylesheet dokumen

3) Ubah atribut DOM yang berbeda