Bagaimanakah Saya Boleh Mengakses Maklumat Fon Dirender dalam JavaScript Apabila Definisi CSS Tiada?

Mengakses Fon yang Dirender Tanpa Ketiadaan Definisi CSS

Semasa memeriksa sifat elemen HTML, mungkin jelas bahawa maklumat penting seperti font-face dan font-size tiada apabila menggunakan atribut object.style JavaScript. Ini kerana gaya elemen diwarisi daripada CSS halaman web dan sehingga sifat tersebut ditakrifkan secara eksplisit, atribut object.style kekal kosong.

Walau bagaimanapun, masih mungkin untuk mendapatkan semula maklumat fon yang diberikan menggunakan kaedah getComputedStyle. Berikut ialah fungsi JavaScript yang melaksanakannya:

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

Untuk menggunakan fungsi ini, cuma masukkan elemen yang ingin anda periksa dan sifat yang ingin anda dapatkan semula, seperti 'font-size'. Contohnya:

css(object, 'font-size'); // Returns '16px' or similar

Adalah penting untuk ambil perhatian bahawa kaedah ini tidak disokong dalam Internet Explorer 8.

Demo Langsung:

Klik di sini untuk melihat demonstrasi langsung di JSFiddle: http://jsfiddle.net/4mxzE/

Coretan Kod:

// Retrieve the computed style information
console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
);

// Define a custom CSS style for the element
document.getElementById('test').style.cssText = 'font-family: fantasy, cursive;';

// Append an HTML element to the document
document.body.appendChild(document.getElementById('test'));

#test {
  /* Custom font-face applied */
}

<!-- Element with rendered font -->
<div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Maklumat Fon Dirender dalam JavaScript Apabila Definisi CSS Tiada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!