Bagaimana untuk Menentukan Ketinggian Garis Sebenar DIV dalam JavaScript?

Menentukan Ketinggian Garisan Sebenar DIV dalam JavaScript

Ramai pembangun JavaScript sering mencari kaedah untuk menentukan ketinggian garisan sebenar unsur DIV, tidak termasuk pengaruh Harta CSS. Walaupun style.lineHeight menyediakan beberapa maklumat, ia bergantung pada kewujudan peraturan CSS.

Pernyataan Masalah

Diberikan elemen DIV tanpa ketinggian garis yang ditentukan CSS , cabarannya terletak pada mencari penyelesaian JavaScript yang mengukur ketinggian garis sebenar dengan tepat tanpa mengira sifat fon. Ini memastikan hasil yang konsisten untuk elemen dengan panjang kandungan dan pemisah baris yang berbeza-beza.

Penyelesaian

Pendekatan yang paling boleh dipercayai dan berkesan melibatkan memanfaatkan sifat clientHeight. Dengan mencipta elemen sementara dengan sifat fon dan saiz yang sama sebagai elemen sasaran, kami boleh mengekstrak clientHeightnya. Nilai ini mewakili ketinggian garis sebenar, termasuk sebarang jidar menegak atau ruang putih dalam DIV.

Berikut ialah contoh pelaksanaan:

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

Dengan "mengklon" sifat elemen sasaran, ini fungsi menjana elemen sementara dan mengukur clientHeightnya. Teknik ini memberikan gambaran tepat ketinggian garisan sebenar, walaupun dalam senario dengan kandungan kompleks atau peraturan CSS yang tiada.

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