Kata pengantar
Situasi ini akan ditemui selama pengembangan. Hanya dua baris yang ditampilkan. Jika lebih dari dua baris terlampaui, tombol "Tampilkan lebih banyak" akan ditampilkan. Klik tombol untuk menampilkan konten garis yang tersisa. Ada Plugin loadingDots JQuery yang secara khusus mengimplementasikan fungsi ini. Namun, hari ini kita akan menggunakan JavaScript asli untuk mengimplementasikan persyaratan ini. Untuk mencapai persyaratan ini, yang paling penting adalah menentukan jumlah baris teks dalam wadah ini. Setelah mendapatkan jumlah garis, ubah tinggi elemen dan tentukan apakah tombol muat ditampilkan.
window.getComputedStyle ()
Untuk menggunakan kode JavaScript asli untuk mendapatkan properti gaya individu dari suatu elemen, tidak dapat dihindari untuk menggunakan window.getComputedStyle() . Ini dapat mengembalikan gaya elemen HTML ketika sebenarnya ditampilkan di browser - tentu saja, beberapa gaya akan diblokir oleh browser. Misalnya, jika Anda ingin mendapatkan warna tautan dan bersiaplah untuk menilai apakah pengguna telah mengunjungi alamat tertentu berdasarkan warna, itu pasti tidak mungkin.
Metode ini mengembalikan pasangan nilai kunci gaya, yang merupakan instance dari CSSStyleDeclaration . Nama indeks dari setiap atribut tidak memiliki - dan nomenklatur unta diadopsi. Misalnya, lineHeight .
Jumlah baris = tinggi keseluruhan/tinggi garis
Ketinggian keseluruhan dapat diperoleh melalui ketinggian. Tinggi baris dapat diperoleh melalui lineHeight , dan hasilnya dibulatkan untuk mendapatkan jumlah baris.
Tetapi ada masalah, jika nilai line-height tidak ditetapkan untuk suatu elemen, nilai defaultnya normal , yang biasanya 1.2 di browser desktop, tetapi juga terkait dengan font. Oleh karena itu, yang terbaik adalah menetapkan nilai line-height untuk elemen yang perlu menghitung jumlah baris.
Implementasi sederhana adalah sebagai berikut:
function countlines (ELE) {var styles = window.getComputedstyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parseInt (styles.height, 10); var lc = math.round (h / lh); console.log ('jumlah garis:', lc, 'garis-tinggi:', lh, 'tinggi:', h); return lc;}Contoh Kode Lengkap
<! Doctype html> <html> <head> <title> jumlah baris </iteme> <style type = "text/css"> p {line-height: 1.3em; } </style> <meta http-equiv = "konten-tipe" content = "text/html; charset = gb2312"> </head> <b body> <p id = "target"> Dia hanya membuat bayi terlihat cantik. Semuanya putih dan dia selalu memiliki pai blueberry segar yang mengukus dan scone dan krim tertutup dan dia membaca pria tua itu dan laut dan bocah lelakinya dengan topi. Luar biasa, dan saya pikir ini indah. Anak saya seperti bermain dengan perangkat eksplosif seperti. Saya tidak tahu di mana dia menemukan mereka, seperti menempelkannya di telinga anjing kami. She already knows how to dry wall cause she puts holes in the wall.<br />"Today's Chinese are just like the Germans back then, indulging in the illusion of "rise" and accustomed to believing in others' flattery. They also take it for granted that as long as China continues to maintain economic growth, not only will the future economic aggregate surpass the 'world leader' of the United States, the United States can expect, but China's comprehensive revival will also be di saku. " Cheng Yawen, profesor di Sekolah Hubungan Internasional dan Urusan Publik Universitas Studi Luar Negeri Shanghai, menunjukkan dalam buku barunya "Kekuatan Strategis Kekuatan Besar", bahwa banyak orang di Cina sekarang terperangkap dalam ilusi "kemakmuran" dan tidak menyadari bahwa di balik total output ekonomi, Cina sebenarnya adalah negara yang sangat mundur. Tidak ada negara besar di dunia yang telah muncul dalam situasi yang tenang dan damai, dan putaran baru peremajaan peradaban China juga akan penuh dengan risiko dan tikungan dan belokan. Mencegah suatu negara dari keruntuhan, disintegrasi atau penurunan harus menjadi prioritas utama strategi nasional China. Memperdalam "kebahagiaan lembut" hanya akan membuat negara rentan. </p><p>Number of rows: <span id="shower"></span></p>Change the window size and automatically calculate <button onclick="countLines()">calculate immediately</button><script type="text/javascript">var target = document.getElementById('target');var shower = document.getElementById('shower');function countLines(ele) { var styles = window.getComputedStyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parseInt (styles.height, 10); var lc = math.round (h / lh); console.log ('jumlah garis:', lc, 'garis-tinggi:', lh, 'tinggi:', h); return lc;} function change () {shower.innerHtml = countlines (target);} window.onresize = ubah; ubah (); </script> </tody> </html> [/html]Meringkaskan
Di atas adalah semua tentang artikel ini. Saya harap konten artikel ini akan membantu semua orang menggunakan JavaScript. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan untuk didiskusikan.