هناك بعض الطرق لـ JS للحصول على عرض وارتفاع عناصر مخفية على الإنترنت ، ولكن قد يكون هناك بعض المواقف التي لا يمكن الحصول عليها.
على سبيل المثال:
<! doctype html> <html lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> اختبار </head> <body> <body> <div id = "test" striame: none " يتم سكب جميع الأنهار والبحار في الأنهار والبحار ، ويتم إعطاؤها لشعب العالم. </viv> <div id = "test2" style = "display: none"> <div style = "display: none"> <div id = "test2_child"> لدي وعاء من النبيذ يكفي لارتياح الغبار. يتم سكب جميع الأنهار والبحار في الأنهار والبحار ، ويتم إعطاؤها لشعب العالم. </viv> </viv> </viv> <div id = "test3"> <viv> <div id = "test3_child"> لدي وعاء من النبيذ يكفي لراحة الغبار. يتم سكب جميع الأنهار والبحار في الأنهار والبحار ، ويتم إعطاؤها لشعب العالم. </viv> </viv> </viv> </viv> </body> </html>
يمكن الحصول على الاختبار ، ولكن لا يمكن الحصول على Test2_Child. في ضوء هذا الموقف ، كتبت طريقة لحلها بنفسي.
حل:
1. احصل على العنصر (خذ العرض والارتفاع) جميع عناصر الأجداد المخفية حتى عنصر الجسم ، بما في ذلك نفسك.
2. احصل على خصائص العرض والرؤية لجميع العناصر المخفية وحفظها.
3. اضبط جميع العناصر المخفية على الرؤية: مخفية ؛ العرض: كتلة! مهمة ؛ (السبب المهم هو تجنب عدم كفاية الأولوية).
4. احصل على عرض وارتفاع العنصر (خذ العرض والارتفاع).
5. استعادة خصائص العرض والرؤية لأسلوب جميع العناصر المخفية.
6. إرجاع عرض العنصر وقيمة الارتفاع.
تنفيذ الكود:
gettize (id) {var width ، height ، elem = document.getElementById (id) ، nonenodes = [] ، nodestyle = [] ؛ getnonenode (elem) ؛ // احصل على عنصر العرض متعدد الطبقات: لا شيء ؛ setNodestyle () ؛ العرض = elem.clientwidth ؛ الارتفاع = elem.clientheight ؛ Resumenodestyle () ؛ إرجاع {العرض: العرض ، الارتفاع: الارتفاع} وظيفة getNonEnode (node) {var display = getStyles (node) .getPropertyValue ('display') ، tagname = node.nodename.tolowercase () ؛ if (display! = 'none' && tagName! = 'body') {getNonEnode (node.parentNode) ؛ } آخر {nonenodes.push (node) ؛ if (tagName! = 'body') getNonenode (node.parentNode) ؛ }} // يمكن أن تحصل هذه الطريقة على ما إذا كان هناك إعداد خاصية العرض النهائي ، ولا يمكن أن يكون style.display. وظيفة getStyles (elem) {// الدعم: ie <= 11+ ، firefox <= 30+ ( #15098 ، #14150) // ie رميات على العناصر التي تم إنشاؤها في المنبثقة // if (! view ||! view.opener) {view = window ؛ } return view.getComputedStyle (elem) ؛ } ؛ وظيفة setNodestyle () {var i = 0 ؛ لـ (؛ i <nonenodes.length ؛ i ++) {var corrability = nonenodes [i] .style.visibility ، display = nonenodes [i] // الكتابة فوق أنماط العرض الأخرى غير المقصودة [i] nodestyle [i] = {الرؤية: الرؤية ، العرض: display}}} وظيفة resumenodestyle () {var i = 0 ؛ لـ (؛ i <nonenodes.length ؛ i ++) {nonenodes [i] .style.visibility = nodestyle [i]. nonenodes [i] .style.display = nodestyle [i] .display ؛ }}}مثال العرض التوضيحي:
var testSize = getSize ('test') ؛ console.log ("test-> width:" + testSize.Width + "الارتفاع:" + testsize.height) test3childsize = getTize ('test3_child') ؛ console.log ("test3_child-> width:" + test3childsize.width + "الارتفاع:" + test3childsize.height) ؛ .ملحوظات:
1. عرض المفتوح جميع عناصر الأجداد المخفية واحصل على قيم العرض والارتفاع للعنصر. في بعض الحالات ، قد يكون من غير الصحيح الحصول على القيمة.
ملاحظة: لكن لا تقلق بشأن هذا ، ما عليك سوى اختراق الطريقة عندما يحدث خطأ ما حقًا.
2. السبب في أن يتم تعيين سمات عنصر الأجداد الخفية وسمات الرؤية في وقت لاحق دون التأثير على نفسه.
3. بالإضافة إلى ذلك ، يتم استخراج طريقة GetStyles من رمز مصدر jQuery ، بحيث يمكن لهذه الطريقة الحصول على ما إذا كان هناك إعداد سمة العرض النهائي.
ملاحظة: لا يمكن الحصول عليها من Style.Display.
الطريقة أعلاه للحصول على عناصر مخفية في JS هي كل المحتوى الذي شاركه المحرر. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.