Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencari Ketinggian Garis Sebenar DIV dalam JavaScript Apabila Tiada Peraturan CSS Wujud?

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

Linda Hamilton
Lepaskan: 2024-11-08 02:48:02
asal
461 orang telah melayarinya

How to Find the Actual Line-Height of a DIV in JavaScript When No CSS Rule Exists?

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan