Bagaimana untuk Mengira Ketinggian Garis Sebenar dalam JavaScript?

Menentukan Ketinggian Garisan Sebenar dengan JavaScript

Dalam pembangunan web, adalah penting untuk memahami ketinggian garisan sebenar sesuatu elemen, terutamanya apabila bekerja dengan kandungan teks. Walaupun sifat style.lineHeight menyediakan ketinggian garisan yang ditentukan CSS, kadangkala ketinggian garisan sebenar mungkin berbeza disebabkan ketiadaan peraturan CSS tertentu.

Mengira Ketinggian Garisan Sebenar

Kepada mengira ketinggian garisan sebenar unsur menggunakan JavaScript, kita boleh menggunakan sifat .clientHeight. Pendekatan ini tidak boleh dipercayai sepenuhnya, tetapi ia menawarkan kaedah praktikal untuk menentukan ketinggian garis tanpa ketiadaan definisi CSS.

Pelaksanaan Kod

Coretan kod berikut menunjukkan cara mengira yang sebenar line-height menggunakan .clientHeight:

function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute("style", "margin:0; padding:0; "
        + "font-family:" + (el.style.fontFamily || "inherit") + "; "
        + "font-size:" + (el.style.fontSize || "inherit"));
    temp.innerHTML = "A";

    el.parentNode.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);

    return ret;
}

Penjelasan

Fungsi beroperasi dengan mengklonkan sifat unsur sasaran kepada unsur sementara. Dengan memaparkan satu aksara ("A") dalam elemen sementara, ia secara berkesan meniru gelagat ketinggian garis bagi elemen asal. Ketinggian klien bagi elemen sementara ini kemudiannya ditangkap sebagai ketinggian garisan sebenar. Akhir sekali, elemen sementara dialih keluar daripada DOM.

Kesimpulan

Kaedah ini menyediakan cara yang boleh dipercayai untuk menentukan ketinggian baris sebenar elemen dalam JavaScript, tanpa mengira sebarang definisi CSS sedia ada. Ia amat berguna untuk kandungan dinamik yang mana kawalan CSS mungkin tidak dapat dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk Mengira Ketinggian Garis Sebenar dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!