Bagaimana untuk Mendapatkan Nilai Pengiraan Font-Family Menggunakan JavaScript?

DDD
Lepaskan: 2024-10-24 06:51:01
asal
755 orang telah melayarinya

How to Retrieve the Computed Font-Family Value Using JavaScript?

Mengambil semula Font-Family Terkira menggunakan JavaScript

Artikel ini menyelidiki lanjutan daripada pertanyaan terdahulu, meneroka cara mendapatkan nama fon sebenar daripada elemen DOM, tidak termasuk sebarang sandaran. Walaupun kaedah "gaya dikira" generik mendapatkan semula rentetan fon lengkap, termasuk sandaran, matlamat kami adalah untuk mengasingkan fon khusus yang digunakan oleh elemen.

Untuk mencapai ini, kami memanfaatkan kaedah getComputedStyle() yang disediakan oleh moden pelayar. Coretan kod berikut menggambarkan pendekatan:

<code class="javascript">let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>
Salin selepas log masuk

Dalam contoh di atas, para mewakili elemen perenggan sasaran. Kaedah getComputedStyle() mengembalikan objek CSSStyleDeclaration (compStyles) yang mengandungi gaya pengiraan elemen. Untuk mendapatkan semula fon-family yang dikira, gunakan kaedah getPropertyValue('font-family'), yang mengembalikan rentetan yang mengandungi nama fon sebenar, tidak termasuk sebarang sandaran.

Pendekatan ini disokong oleh kebanyakan penyemak imbas utama, termasuk Chrome, Firefox, Safari dan Edge. Rujuk dokumentasi Rangkaian Pembangun Mozilla untuk butiran lanjut: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Pengiraan Font-Family Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan