Bagaimana untuk Mencari Ketinggian Garis Sebenar DIV dalam JavaScript Apabila Tiada Peraturan CSS Wujud?

Mencari Garis-Ketinggian Sebenar DIV dalam JavaScript

Dalam JavaScript, mendapatkan garis-tinggi elemen adalah mudah melalui harta style.lineHeight. Walau bagaimanapun, pendekatan ini bergantung pada kewujudan peraturan gaya CSS yang menentukan ketinggian garis. Apabila peraturan sedemikian tiada, menentukan ketinggian garisan sebenar unsur yang diberikan menimbulkan cabaran yang berbeza.

Penyelesaian: Menggunakan ClientHeight

Ketinggian garisan sebenar boleh ditentukan dengan tepat menggunakan sifat clientHeight, kerana ia mewakili ketinggian pengiraan elemen, termasuk padding, tetapi bukan margin. Fungsi JavaScript berikut menunjukkan teknik ini:

function getLineHeight(el) {
  // Create a temporary element to clone the target element's properties
  const temp = document.createElement(el.nodeName);

  // Override default styles to ensure consistent font properties
  temp.setAttribute("style", "margin:0; padding:0; font-family:" +
    (el.style.fontFamily || "inherit") + "; font-size:" +
    (el.style.fontSize || "inherit"));

  // Set the temporary element's content to "A"
  temp.innerHTML = "A";

  // Append the temporary element to the DOM
  el.parentNode.appendChild(temp);

  // Get the computed height of the temporary element
  const ret = temp.clientHeight;

  // Remove the temporary element
  temp.parentNode.removeChild(temp);

  // Return the computed height, which represents the actual line-height
  return ret;
}

Fungsi ini secara berkesan mengklon sifat elemen sasaran kepada elemen sementara, yang kemudiannya digunakan untuk mengira ketinggian garis. Dengan menetapkan sifat fon kepada "warisan" dalam elemen sementara, kami memastikan ia menggunakan keluarga dan saiz fon yang sama seperti elemen sasaran. Pendekatan ini menyediakan kaedah yang boleh dipercayai dan konsisten untuk menentukan ketinggian garisan sebenar yang diberikan, tanpa mengira kehadiran peraturan gaya CSS.

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