مقدمة
سيتم مواجهة هذا الموقف أثناء التنمية. يتم عرض سطرين فقط. إذا تم تجاوز أكثر من سطرين ، فسيتم عرض زر "عرض المزيد". انقر فوق الزر لعرض محتوى الخطوط المتبقية. هناك مكون إضافي jQuery loadingDots الذي ينفذ هذه الوظيفة على وجه التحديد. ومع ذلك ، سنستخدم اليوم JavaScript الأصلي لتنفيذ هذا المطلب. لتحقيق هذا المطلب ، فإن الشيء الأكثر أهمية هو تحديد عدد خطوط النص في هذه الحاوية. بعد الحصول على عدد الخطوط ، قم بتعديل ارتفاع العنصر وحدد ما إذا كان يتم عرض زر التحميل.
window.getComputedStyle ()
لاستخدام رمز JavaScript الأصلي للحصول على خصائص النمط الفردي لعنصر ما ، من المحتم استخدام window.getComputedStyle() . يمكنه إرجاع أنماط عنصر HTML عندما يتم عرضه فعليًا في المتصفح - بالطبع ، سيتم حظر بعض الأنماط بواسطة المتصفح. على سبيل المثال ، إذا كنت ترغب في الحصول على لون الرابط والاستعداد للحكم على ما إذا كان المستخدم قد زار عنوانًا معينًا باللون ، فهذا بالتأكيد غير ممكن.
تقوم الطريقة بإرجاع زوج القيمة المفتاح ، وهو مثيل لـ CSSStyleDeclaration . أسماء الفهرس لكل سمة لا تحتوي على - ويتم اعتماد تسمية الإبل. على سبيل المثال ، lineHeight .
عدد الصفوف = ارتفاع الارتفاع/الخط الإجمالي
يمكن الحصول على الارتفاع الكلي من خلال الارتفاع. يمكن الحصول على ارتفاع الصف من خلال lineHeight ، ويتم تقريب النتيجة للحصول على عدد الصفوف.
ولكن هناك مشكلة ، إذا لم يتم تعيين قيمة line-height لعنصر ، فإن قيمته الافتراضية normal ، والتي عادة ما تكون 1.2 في متصفحات سطح المكتب ، ولكنها مرتبطة أيضًا بالخطوط. لذلك ، من الأفضل تعيين قيمة line-height للعناصر التي تحتاج إلى حساب عدد الصفوف.
التنفيذ البسيط هو كما يلي:
COUNTLINES COUNTINGES (ELE) {var styles = window.getComputedStyle (eLe ، null) ؛ var lh = parseint (Styles.lineheight ، 10) ؛ var h = parseint (styles.hight ، 10) ؛ var lc = math.round (h / lh) ؛ console.log ("عدد الخط:" ، LC ، "Line-Height:" ، LH ، "الارتفاع:" ، H) ؛ العودة lc ؛}مثال رمز كامل
<! doctype html> <html> <head> <title> عدد الخط </title> <style type = "text/css"> p {line-height: 1.3em ؛ } </style> <meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312"> </head> <body> <p id = "target"> لقد جعلت مجرد مظهر طفل جميل. كل شيء أبيض ولديها دائمًا فطيرة عنبية طازجة تبخّر وكعكات وكريمة مغلقة وهي تقرأ الرجل العجوز والبحر وصبيها الصغير مع أغطية. إنه لأمر مدهش ، وأعتقد أن هذا جميل. طفلي يشبه اللعب بأجهزة متفجرة. لا أعرف أين عثرت عليهم ، مثل التمسك بهم في أذن كلبنا. إنها تعرف بالفعل كيف تجف الجدار لأنها تضع ثقوبًا في الحائط. <br /> "الصينيون اليوم مثل الألمان في ذلك الوقت ، ينغمسون في وهم" الصعود "ويعتدون على الإيمان بالتعويض عن الآخرين. الجيب ". أشار تشنغ ياوين ، أستاذ في كلية العلاقات الدولية والشؤون العامة في جامعة شنغهاي للأجانب ، في كتابه الجديد "القوى الاستراتيجية للقوى العظمى" ، أن الكثير من الناس في الصين محاصرون الآن في وهم "الرخاء" ولا يدركون أنه وراء إجمالي الناتج الاقتصادي ، فإن الصين هي في الواقع بلد متخلف للغاية. لا يوجد دولة كبيرة في العالم ظهرت في وضع هادئ وسلمي ، وستكون الجولة الجديدة من تجديد الحضارة في الصين مليئة بالمخاطر والتحولات والمنعطفات. يجب أن يصبح منع أي بلد من الانهيار أو التفكك أو التراجع هو الأولوية القصوى للاستراتيجية الوطنية للصين. إن تعميق "السعادة الناعمة" لن يجعل البلد ضعيفًا إلا. </p> <p> عدد الصفوف: <span id = "dame"> </pan> </p> قم بتغيير حجم النافذة وحسابًا تلقائيًا <button onClick = "countlines ()"> حساب على الفور </button> <script type = "text/javaScript"> var target = document.getElementByid ('target') window.getComputedStyle (ele ، null) ؛ var lh = parseint (Styles.lineheight ، 10) ؛ var h = parseint (styles.hight ، 10) ؛ var lc = math.round (h / lh) ؛ console.log ("عدد الخط:" ، LC ، "Line-Height:" ، LH ، "الارتفاع:" ، H) ؛ return lc ؛} تغيير الوظيفة () {dather.innerhtml = countlines (target) ؛} window.onresize = change ؛ change () ؛ </script> </body> </html> [/html]لخص
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون محتوى هذه المقالة مفيدًا لكل شخص يستخدم JavaScript. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لمناقشة.