يعد عرض الكتلة أحد المعلمات الرئيسية التي تحدد حجمها وموقعها على صفحة الويب. ولكن كيف يمكنك معرفة هذه المعلمة في الممارسة? في هذه المقالة ، سنلقي نظرة على بعض الطرق والأدوات البسيطة التي ستساعدك على تحديد عرض الكتلة باستخدام جافا سكريبت.
واحدة من أسهل الطرق لمعرفة عرض كتلة هو استخدام خاصية أوفسيتويدث. يقوم بإرجاع قيمة عرض الكتلة ، بما في ذلك الحدود والتمرير. لاستخدامها ، تحتاج إلى الحصول على مرجع إلى العنصر ، على سبيل المثال ، من خلال المعرف أو الفئة ، وببساطة استدعاء الخاصية أوفسيتويدث.
إذا كنت بحاجة إلى الحصول على قيمة عرض الكتلة دون مراعاة الحدود والتمرير ، فيمكنك استخدام خاصية عرض العميل. يقوم بإرجاع قيمة عرض الكتلة ، بما في ذلك التمرير ، ولكن باستثناء الحدود.
إذا كنت ترغب في الحصول على العرض الفعلي للكتلة بالبكسل دون التمرير والحدود والهوامش ، يمكنك استخدام الخاصية جيتبوندينغكلينتريكت (). يقوم بإرجاع كائن يحتوي على معلومات حول حجم وموضع الكتلة داخل نافذة المتصفح. ستجد في هذا الكائن خاصية العرض ، والتي ستحتوي على عرض الكتلة.
- كيفية تحديد عرض كتلة جس: طرق وأدوات بسيطة
- باستخدام خاصية إزاحة العرض
- باستخدام طريقة جيتبوندينغكلينتريكت()
- سؤال وجواب
كيفية تحديد عرض كتلة جس: طرق وأدوات بسيطة
هناك عدة طرق لمعرفة عرض كتلة جس. دعونا ننظر إلى بعض منهم.
كل هذه الأساليب تسمح لك للحصول على عرض كتلة جس في بكسل. استخدم الطريقة الأنسب لموقفك المحدد.
باستخدام خاصية إزاحة العرض
الخاصية أوفسيتويدث في جافا سكريبت يسمح لك لمعرفة العرض الفعلي لعنصر في بكسل ، بما في ذلك عرض المحتوى والحدود والتمرير (إن وجدت). إنها أداة مفيدة عند العمل مع العناصر الديناميكية والتصميم التكيفي.
لاستخدام خاصية إزاحة العرض ، تحتاج إلى الحصول على رابط للعنصر المطلوب في بنية دوم للصفحة. على سبيل المثال ، يمكننا تحديد عنصر باستخدام طريقة جيتليمنتبيد:
عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');
عرض فار = عنصر.أوفيسيتويدث;
في المثال أعلاه ، قمنا بتحديد عنصر مع معرف "مياليمنت" وحفظه إلى متغير العنصر. ثم ، باستخدام خاصية أوفسيتويدث ، نحصل على عرض العنصر بالبكسل وحفظه إلى متغير العرض.
قيمة العرض الناتجة هي رقم ويمكن استخدامها لمزيد من المعالجة أو العرض على الصفحة.
تأخذ خاصية عرض الإزاحة في الاعتبار جميع العناصر الداخلية وعرضها ، لذلك يمكن استخدامها لتحديد العرض الفعلي للكتلة بدقة ، حتى إذا كانت هناك عناصر أخرى بداخلها.
ومع ذلك ، ضع في اعتبارك أن خاصية إزاحة العرض ترجع قيمة بالبكسل ، لذلك لإنشاء تصميم تكيفي والتعامل مع أجهزة مختلفة ، قد تكون هناك حاجة إلى منطق إضافي بناء على العرض الناتج.
باستخدام طريقة جيتبوندينغكلينتريكت()
طريقة جيتبوندينغكلينتريكت () هو أداة مفيدة للحصول على معلومات حول حجم وموقف عنصر على الصفحة.
يقوم بإرجاع كائن يحتوي على الخصائص التالية:
- اليسار-الحد الأيسر للعنصر
- أعلى-الحد العلوي للعنصر
- اليمين-الحد الأيمن للعنصر
- أسفل-الحد السفلي للعنصر
- العرض-عرض العنصر
- الارتفاع-ارتفاع العنصر
هذه الطريقة مفيدة بشكل خاص عندما نحتاج إلى حساب عرض عنصر ما ، مع مراعاة حدوده وحشوه.
مثال على استخدام طريقة جيتبوندينغكلينتريكت() :
- حدد العنصر الذي تريد معرفة عرضه.
- استخدام طريقة جيتبوندينغكلينتريكت () للحصول على كائن مع معلومات حول حجم وموضع العنصر.
- استخراج خاصية الكائن المطلوب (على سبيل المثال ، العرض) للحصول على عرض العنصر.
مثال على الكود:
كونست العنصر = وثيقة. كويريسيلكتور ( '. بلدي عنصر');
كونست المستقيم = عنصر.جيتبوندينغكلينتركت();
عرض كونست = المستقيم.العرض;
وحدة التحكم.سجل (عرض);
نتيجة لتنفيذ هذا الرمز ، سيتم إخراج قيمة عرض العنصر إلى وحدة التحكم. سيسمح لنا ذلك بمعرفة عرض الكتلة واستخدام القيمة الناتجة في مزيد من العمل مع دوم.