Bagaimanakah Saya Boleh Menggayakan Watak Individu dalam Kandungan Web Menggunakan CSS dan JavaScript?

Menyesuaikan Rupa Watak Khusus dengan CSS

Menyasarkan aksara individu menggunakan CSS mungkin kelihatan seperti aspirasi yang tidak praktikal. Walau bagaimanapun, terdapat penyelesaian yang bijak untuk mencapai kesan ini, terutamanya apabila dipasangkan dengan JavaScript.

Pertimbangkan senario di mana anda ingin menyerlahkan semua contoh huruf "z" dalam warna merah dalam perenggan. Atau, dalam konteks notasi muzik, anda mungkin ingin menjajarkan secara menegak semua superskrip "7" aksara dalam elemen kepunyaan kelas "chord".

Walaupun CSS tulen tidak dapat menangani cabaran ini secara langsung, pendekatan hibrid boleh memberikan penyelesaian yang memuaskan. Kod berikut menunjukkan cara ini boleh dicapai:

CSS

span.highlight {
  background: #F60;
  padding: 5px;
  display: inline-block;
  color: #FFF;
}

p {
  font-family: Verdana;
}

HTML

<p>
  Let's go Zapata let's do it for the revolution, Zapatistas!!!
</p>

JavaScript

jQuery.fn.highlight = function(str, className) {
  var regex = new RegExp(str, "gi");

  return this.each(function() {
    this.innerHTML = this.innerHTML.replace(regex, function(matched) {
      return "<span class=\"" + className + "\">" + matched + "</span>";
    });
  });
};

$("p").highlight("Z", "highlight");

Kod JavaScript ini memanfaatkan perpustakaan jQuery untuk mencari dan menggantikan teks yang sepadan dengan penanda HTML yang termasuk kelas tersuai untuk penggayaan. Dalam contoh ini, kelas "highlight" diberikan kepada semua aksara "Z" dalam elemen perenggan.

Hasil

Dengan menggabungkan komponen ini, kesan yang diingini boleh dicapai. Sebagai contoh, teks "Zapata Zapatistas!!!" akan dipaparkan dengan semua aksara "Z" diserlahkan dengan warna merah.

Pendekatan ini, walaupun tidak disokong secara langsung oleh CSS, membolehkan penyesuaian yang lebih besar bagi aksara individu dalam kandungan web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Watak Individu dalam Kandungan Web Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!