Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mendapatkan Fon yang Dirender bagi Elemen Tanpa Definisi Fon CSS dalam JavaScript?

Bagaimanakah Saya Boleh Mendapatkan Fon yang Dirender bagi Elemen Tanpa Definisi Fon CSS dalam JavaScript?

Linda Hamilton
Linda Hamiltonasal
2024-12-02 15:28:15393semak imbas

How Can I Get the Rendered Font of an Element Without CSS Font Definitions in JavaScript?

Mengambil semula Fon Render Sebenar Tanpa Ketiadaan Definisi CSS

Dalam bidang JavaScript, pembangun sering menghadapi keperluan untuk memastikan yang sebenar fon yang digunakan untuk memaparkan elemen tertentu, walaupun apabila atribut berkaitan fon tidak ditakrifkan secara eksplisit dalam CSS. Cabaran ini timbul apabila sistem atau penyemak imbas web menggunakan tetapan fon lalai untuk pemaparan.

Penyelesaian:

Untuk mendedahkan fon tersembunyi, pembangun boleh memanfaatkan fungsi getComputedStyle, yang mengekstrak gaya pengiraan unsur. Dengan memberi makan dalam harta yang diingini sebagai hujah, seseorang boleh mendapatkan nilai yang diberikan, termasuk keluarga dan saiz fon. Berikut ialah fungsi tersuai yang memudahkan proses:

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

Penggunaan:

Untuk mendapatkan semula saiz fon, sebagai contoh, hanya gunakan fungsi tersebut:

css(object, 'font-size'); // returns '16px', assuming that's the rendered size

Penting Nota:

  • Kaedah ini tidak disokong dalam Internet Explorer 8.
  • Fungsi mengembalikan rentetan, jadi pemprosesan seterusnya mungkin diperlukan untuk mengekstrak maklumat tertentu seperti keluarga fon atau saiz.

Demonstrasi Langsung:

Untuk contoh praktikal, lawati demo langsung di http://jsfiddle.net/4mxzE/. Biola ini menunjukkan penggunaan fungsi css() untuk mendapatkan semula fon yang diberikan untuk elemen div dengan muka fon yang tidak ditentukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Fon yang Dirender bagi Elemen Tanpa Definisi Fon CSS dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn