Bagaimana untuk Mencari Ketinggian Garis Sebenar DIV dalam JavaScript?

Mencari Ketinggian Garis Sebenar DIV dalam JavaScript

Dalam JavaScript, selalunya wajar untuk menentukan ketinggian garis sebenar DIV , dan bukannya bergantung pada sifat CSS. Ini amat berguna apabila ketinggian garis tidak ditakrifkan secara eksplisit dalam CSS.

Cabaran

Kaedah tradisional untuk menyemak atribut style.lineHeight menyediakan atribut yang ditentukan CSS ketinggian garisan, tetapi nilai ini mungkin tidak menggambarkan ketinggian garisan sebenar yang diberikan pada halaman.

Penyelesaian: Menggunakan ClientHeight

Penyelesaian terletak pada penggunaan sifat clientHeight. Sifat ini, yang mengukur ketinggian elemen termasuk pelapik dan jidarnya, juga boleh digunakan untuk menentukan ketinggian garisan DIV di bawah syarat berikut:

• Keluarga fon dan saiz fon ialah sama merentas baris.
• Tiada sifat ketinggian garis tambahan digunakan melalui CSS atau gaya sebaris atribut.

Pelaksanaan

Untuk mendapatkan ketinggian garisan sebenar menggunakan clientHeight, ikut langkah berikut:

1. Klon DIV yang berkenaan, memastikan semua gaya yang berkaitan diwarisi.
2. Tetapkan klon HTML dalaman DIV kepada satu aksara, seperti "A."
3. Tambahkan DIV yang diklon pada nod induk DIV asal.
4. Kira tinggi klien DIV yang diklon.
5. Alih keluar mengklon DIV daripada dokumen.

Coretan Kod

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;
}

Pendekatan ini menyediakan kaedah yang mudah tetapi berkesan untuk mengukur ketinggian garis sebenar DIV dengan tepat, tanpa mengira sebarang sifat CSS menimpa.

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