Bagaimana Menggayakan Separuh Watak dengan CSS dan JavaScript: Pencarian untuk Kebolehcapaian?

Penggayaan Separa Watak: Pencarian untuk Ketelusan

Cabaran untuk menggayakan hanya separuh daripada aksara, sambil memastikan teks boleh diakses, telah menarik minat pemaju untuk beberapa lama. Artikel ini akan membongkar penyelesaian menggunakan gabungan CSS tulen dan JavaScript untuk pelaksanaan dinamik.

Penyelesaian untuk Aksara Tunggal

Untuk menggayakan satu aksara, cuma tambah kelas ".halfStyle" kepada elemen span yang sepadan. Caranya terletak pada menetapkan kandungan ":before" pseudo-element secara dinamik menggunakan atribut "data-content". Ini membolehkan anda menentukan aksara yang diingini untuk setiap rentang.

Penyelesaian Automatik untuk Teks Dinamik

Untuk menggunakan penggayaan separa pada teks dinamik, jQuery mengautomasikan proses. Dengan melelaran melalui aksara, ia mencipta elemen tersembunyi untuk kebolehaksesan dan elemen kelihatan dengan kelas ".halfStyle".

Pelaksanaan CSS

<code class="css">.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content);
    overflow: hidden;
    color: #f00;
}</code>

< h3>Pelaksanaan JavaScript

<code class="javascript">$('.textToHalfStyle').each(function() {
    var $el = $(this);
    var text = $el.text();
    var chars = text.split('');

    for (var i = 0; i < chars.length; i++) {
        $el.append('<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>');
    }
});</code>

Pemeliharaan Kebolehcapaian

Penyelesaian ini memastikan kebolehaksesan dengan menyediakan teks tersembunyi untuk pembaca skrin. Elemen halimunan mengekalkan teks asal sambil membenarkan elemen kelihatan memaparkan bahagian yang digayakan.

Kesimpulan

Dengan teknik ini, anda boleh mencapai kesan yang diingini menggayakan separa aksara dalam teks, sama ada statik atau dinamik. Ia menggunakan gabungan CSS dan JavaScript untuk mengekalkan kebolehaksesan sambil meningkatkan daya tarikan visual reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana Menggayakan Separuh Watak dengan CSS dan JavaScript: Pencarian untuk Kebolehcapaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!