Saya memiliki grap yang dibuat oleh CSS, yang secara dinamis diubah oleh JS. Saya menunjukkan nilai maksimum grafik dengan elemen semu sebagai:
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}
Itulah mengapa saya perlu mengatur nilai ini dengan JS. Saya mencoba $(".graph:before").css("content", hh);
tetapi tidak membantu. Bagaimana cara mendapatkan nilai itu?
Saya harap cuplikan di bawah ini dapat membantu, Anda dapat menentukan nilai content
yang Anda inginkan melalui JS menggunakan fungsi CSS attr()
.
Di bawah ini Anda memiliki dua pilihan: menggunakan JavaScript atau jQuery:
jQuery:
$('.graph').on('click', function () {
//do something with the callback
$(this).attr('data-before','anything'); //anything is the 'content' value
});
JavaScript:
var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
event.target.setAttribute('data-before', 'anything');
});
CSS:
.graph:before {
content: attr(data-before); /* value that that refers to CSS 'content' */
position:absolute;
top: 0;
left: 0;
}
Pembaruan (2018): seperti yang telah dicatat dalam komentar, Anda sekarang dapat melakukan ini.
Anda tidak dapat memodifikasi elemen semu melalui JavaScript karena elemen semu bukan bagian dari DOM. Pilihan terbaik Anda adalah mendefinisikan kelas lain dalam CSS Anda dengan gaya yang Anda butuhkan dan kemudian menambahkannya ke elemen. Karena hal tersebut sepertinya tidak mungkin dilakukan dari pertanyaan Anda, mungkin Anda perlu melihat penggunaan elemen DOM yang sebenarnya, bukan elemen semu.
Bagi Anda yang masih mencari solusi untuk masalah yang sama, hal ini dapat dilakukan dengan menggunakan jQuery:
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
Contoh ini mengilustrasikan bahwa pada saat mengklik tombol: ubahSebelum
, nilai untuk .graph:before
akan berubah sesuai dengan nilai dinamis baru yang akan muncul.
Untuk penjelasan lebih lanjut mengenai perubahan gaya elemen :before
atau :after
atau mendapatkan isinya:
Anggaplah HTML Anda seperti ini:
<div id="something">Test</div>
Kemudian Anda mengatur :before di CSS dan mendesainnya seperti apa:
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
Perhatikan bahwa saya juga mengatur atribut content
pada elemen itu sendiri agar Anda dapat mengeluarkannya dengan mudah nantinya.
Sekarang ada sebuah tombol
yang diklik, Anda ingin mengubah warna :before menjadi hijau dan ukuran hurufnya menjadi 30px. Anda dapat mencapainya dengan cara sebagai berikut:
Tentukan sebuah css dengan gaya yang Anda inginkan pada beberapa kelas .activeS
:
.activeS:before{
color:green !important;
font-size:30px !important;
}
Sekarang Anda dapat mengubah gaya :before dengan menambahkan kelas ke elemen :before Anda sebagai berikut:
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
Jika Anda hanya ingin mendapatkan konten dari :before
, hal ini dapat dilakukan dengan cara:
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
Saya harap ini membantu