Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Dapatkan dan Kemas Kini Saiz Fon dalam HTML, Walaupun Ditakrifkan dalam Lembaran Gaya?

Bagaimanakah Saya Boleh Dapatkan dan Kemas Kini Saiz Fon dalam HTML, Walaupun Ditakrifkan dalam Lembaran Gaya?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-09 14:01:14445semak imbas

How Can I Reliably Retrieve and Update Font Size in HTML, Even When Defined in a Stylesheet?

Mengambil Saiz Fon dalam HTML

Dalam HTML, saiz fon elemen boleh ditentukan menggunakan CSS. Biasanya, sifat style.fontSize digunakan untuk menetapkan atau mendapatkan semula saiz fon. Walau bagaimanapun, mendapatkan semula saiz fon boleh mencabar jika ia ditakrifkan dalam lembaran gaya.

Menggunakan style.fontSize

Contoh berikut cuba mendapatkan semula dan kemudian mengemas kini fon saiz elemen menggunakan style.fontSize:

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

Kod ini, bagaimanapun, mungkin tidak berfungsi jika saiz fon ditakrifkan secara luaran dalam lembaran gaya CSS. Dalam kes sedemikian, style.fontSize akan mengembalikan rentetan kosong, yang boleh membawa kepada hasil yang tidak dijangka.

Menggunakan window.getComputedStyle

Untuk mendapatkan semula saiz fon dengan tepat, walaupun apabila ia ditakrifkan dalam lembaran gaya, gunakan kaedah window.getComputedStyle. Kaedah ini mengira gaya sebenar elemen:

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); // Converts the retrieved value to a float
el.style.fontSize = (fontSize + 1) + 'px'; // Updates the font size

Dengan menggunakan window.getComputedStyle, anda boleh mendapatkan semula dan mengemas kini saiz fon elemen dengan pasti, tanpa mengira cara ia ditakrifkan dalam lembaran gaya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan dan Kemas Kini Saiz Fon dalam HTML, Walaupun Ditakrifkan dalam Lembaran Gaya?. 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