غالبا ما يواجه مطورو الويب مهمة إخفاء كتلة معينة على صفحة الويب. سواء كانت معلومات غير ذات صلة أو لافتة إعلانية أو عنصرا يجب أن يصبح مرئيا فقط في ظل ظروف معينة ، فإن القدرة على جعل الكتلة غير مرئية هي مهارة مهمة. في هذه المقالة ، سنلقي نظرة على بعض الطرق البسيطة لإخفاء كتلة ومشاركة النصائح المفيدة.
واحدة من أسهل الطرق لجعل كتلة غير مرئية هو استخدام كس. للقيام بذلك ، يمكنك تعيين خاصية العرض: لا شيء للكتلة. ستختفي هذه الكتلة تماما من الصفحة ، دون أن تشغل مساحة ودون التأثير على موقع العناصر الأخرى. ومع ذلك ، لا تحافظ هذه الطريقة على الوصول إلى محتويات الكتلة ، لذلك إذا كنت تريد أن تظل الكتلة في متناول البرامج النصية أو التقنيات المساعدة (على سبيل المثال ، للمستخدمين ضعاف البصر) ، فيجب عليك استخدام تقنيات أخرى.
طريقة أخرى لجعل كتلة غير مرئية هي استخدام سمات هتمل. على سبيل المثال ، يمكنك إضافة السمة المخفية إلى الكتلة ، والتي ستخفيها تلقائيا. ومع ذلك ، لا تحافظ هذه الطريقة أيضا على الوصول إلى محتويات الكتلة ولا يوصى بها للأغراض الدلالية. سيكون الخيار الأكثر صحة هو استخدام السمة المخفية أريا مع القيمة الحقيقية ، مما يساعد على الحفاظ على الوصول إلى محتويات الكتلة للتقنيات المساعدة.
من المهم أن تتذكر أن إخفاء الكتل على صفحة الويب يمكن أن يؤثر على إمكانية الوصول إليها للمستخدمين ، لذلك من الضروري استخدام تقنيات الاختباء بشكل صحيح والتأكد من أن المحتوى في متناول جميع فئات المستخدمين.
بعض عناصر هتمل ، مثل المراسي ، والعناوين ، أو الصور ، لها طرقها الخاصة للاختباء. على سبيل المثال ، يمكنك استخدام سمة تابيندكس مع القيمة "-1" لحظر التركيز على عنصر ، أو إضافة فئة متداخلة مخفية بصريا وتعيين خصائص كس إليها من شأنها أن تجعل العنصر غير مرئي ، ولكن لا يزال الوصول إلى البرامج النصية والمستخدمين ضعاف البصر.
- طرق لجعل كتلة غير مرئية: النصائح والحيل
- باستخدام أنماط كس
- تحديد شفافية عنصر
- تطبيق سمة "العرض: لا شيء"
- باستخدام تحديد المواقع
- تعطيل عنصر باستخدام السمة " معطل
- سؤال وجواب
- كيف يمكنني جعل كتلة غير مرئية على صفحة ويب?
- كيف يمكنني جعل كتلة غير مرئية, ولكن في نفس الوقت الحفاظ على حجمها وموقعها?
- يمكن لمستخدمي الأجهزة المختلفة رؤية كتلة غير مرئية?
- هل من الممكن لجعل كتلة غير مرئية باستخدام جافا سكريبت?
- هل من الممكن لجعل كتلة غير مرئية باستخدام الرسوم المتحركة?
طرق لجعل كتلة غير مرئية: النصائح والحيل
في بعض الأحيان قد يحتاج مطور الويب إلى إخفاء كتلة معينة مؤقتا على صفحة الويب. فيما يلي عدة طرق لجعل كتلة غير مرئية باستخدام كس.
- استخدام العرض: لا شيء;
- تطبيق الرؤية: مخفي;
- تطبيق التعتيم: 0;
1. استخدام العرض: لا شيء;
تتيح لك خاصية العرض: لا شيء إخفاء عنصر تماما من الصفحة. لا يشغل مساحة في المستند ولا يؤثر على موقع العناصر الأخرى.
2. تطبيق الرؤية: مخفي;
الرؤية: تخفي الخاصية المخفية العنصر ، ولكنها تتركه مرئيا في تخطيط الصفحة. يحتفظ بمساحة لعنصر ولا يؤثر على موقع العناصر الأخرى.
3. تطبيق التعتيم: 0;
خاصية التعتيم: 0 تجعل العنصر شفافا تماما. يظل مرئيا على تخطيط الصفحة ويستمر في شغل مساحة ، لكن محتوياته تصبح غير مرئية.
عند اختيار طريقة لإخفاء كتلة ، يجب أن تأخذ في الاعتبار متطلبات وميزات مشروعك. إذا كنت بحاجة إلى رؤية كاملة للكتلة دون التأثير على العناصر الأخرى ، فمن الأفضل استخدام العرض: لا شيء. إذا كان يجب أن تحتفظ الكتلة بمكانها في التخطيط ولا تؤثر على العناصر الأخرى ، فيجب عليك تحديد الرؤية: مخفية. وإذا كنت تحتاج فقط إلى إخفاء محتويات الكتلة ، ولكن اتركها مرئية ، يمكنك استخدام التعتيم: 0.
من المهم أن تتذكر أنه يمكن العثور على كتلة غير مرئية وعرضها باستخدام أدوات مطور المتصفح ، لذلك إذا كنت بحاجة إلى إمباسابيليتي كاملة ، يجب عليك استخدام أساليب أخرى ، مثل إزالة عنصر من دوم أو تغيير موقفها في شجرة العنصر.
باستخدام أنماط كس
يمكنك استخدام أنماط كس المختلفة لإنشاء كتلة غير مرئية على صفحة ويب. فيما يلي بعض الطرق البسيطة لتحقيق هذا الهدف:
- العرض: لا شيء ؛ - يتيح لك هذا النمط إخفاء عنصر تماما من الصفحة. لا تشغل مساحة على الصفحة ولا يتم عرض محتوياتها. ومع ذلك ، يتم حفظ العنصر في دوم ويمكن عرضها بسهولة إذا لزم الأمر.
- الرؤية: مخفي ؛ - يخفي هذا النمط أيضا العنصر ، لكنه يستمر في شغل مساحة على الصفحة. لا يتم عرضه ، ولكن يظل مخططه مرئيا ، مما قد يؤثر على موقع العناصر الأخرى.
- التعتيم: 0; - هذا النمط يجعل العنصر شفافا تماما ، لكنه يحتفظ بموقعه على الصفحة. بمعنى، لا تتم إزالة العنصر من دفق المستند ويظل مخططه مرئيا ، ولكنه غير مرئي للمستخدم.
- الموضع: مطلق ؛ جنبا إلى جنب مع اليسار :-9999 بكسل ؛ أو أعلى :-9999 بكسل; - تتيح لك هذه الطريقة نقل عنصر خارج المنطقة المرئية من الصفحة. لن يراه المستخدم ، لكنه سيبقى في دوم وسيكون قادرا على أن يكون مرئيا عندما يتغير الموضع.
اعتمادا على احتياجات ومتطلبات المشروع ، يمكنك اختيار الطريقة المناسبة لإخفاء الكتلة. من المهم أن تتذكر أن إخفاء الكتلة لا يعني إزالتها من الدوم ، لذلك يمكن دائما عرض العنصر مرة أخرى إذا لزم الأمر.
تحديد شفافية عنصر
شفافية عنصر صفحة ويب يمكن تعديلها باستخدام خاصية التعتيم المغلق. تسمح لك هذه الخاصية بتعيين مستوى الشفافية لعنصر من 0 إلى 1 ، حيث يكون 0 عنصرا شفافا تماما و 1 عنصرا معتما تماما.
لتعيين الشفافية على عنصر ، يجب تحديد قيمة لخاصية التعتيم. على سبيل المثال:
- التعتيم: 0-سيصبح العنصر شفافا تماما;
- التعتيم: 0.5-سيكون العنصر نصف شفاف;
- التعتيم: 1-سيكون العنصر معتما تماما.
مثال الاستخدام:
كتلة شفافة
.شفاف-بلوك {
التعتيم: 0.5;
}
في هذا المثال ، ستكون الكتلة التي تحتوي على فئة "كتلة شفافة" نصف شفافة.
بالإضافة إلى خاصية التعتيم ، يمكنك أيضا استخدام خاصية رغبا لتعيين شفافية عنصر. انها تسمح لك لتعيين لون عنصر في شكل رغب مع معلمة إضافية للشفافية.
مثال الاستخدام:
كتلة شفافة
.شفاف-بلوك {
لون الخلفية: رغبا (255 ، 0 ، 0 ، 0.5);
}
في هذا المثال ، سيكون للكتلة التي تحتوي على فئة "كتلة شفافة" لون أحمر بخلفية نصف شفافة.
تطبيق سمة "العرض: لا شيء"
تتمثل إحدى أسهل الطرق لجعل الكتلة غير مرئية على صفحة الويب في استخدام سمة "العرض:بلا". يتم تطبيق هذه السمة على العنصر وتسمح لك بإخفاء عرضها على الصفحة.
يمكن إضافة السمة" العرض: لا شيء " إلى أي عنصر هتمل ، مثل ديف ، ف ، الجدول ، وغيرها. بعد تطبيق سمة "العرض" : لا شيء " ، يختفي العنصر من تدفق المستند ، وتتحول العناصر الأخرى في الصفحة كما لو لم تكن موجودة من قبل.
لتطبيق السمة" العرض: بلا " على عنصر ، تحتاج إلى استخدام خاصية النمط. على سبيل المثال ، لجعل كتلة مع فئة" مخفية " غير مرئية ، يمكنك استخدام التعليمات البرمجية التالية:
.مخفي {
عرض: لا شيء;
}
بمجرد تطبيق هذا الرمز ، ستصبح جميع العناصر التي تحتوي على فئة "مخفية" في الصفحة غير مرئية. يمكن أن يكون هذا مفيدا إذا كنت تريد إخفاء كتلة مؤقتا أو إنشاء وظيفة من شأنها تغيير عرض عنصر بناء على إجراءات المستخدم.
ومع ذلك ، من المهم أن تتذكر أن استخدام سمة " العرض: لا شيء " لا يزيل عنصرا من شجرة دوم ولا يمسح محتوياته. يصبح العنصر ببساطة غير مرئي على الصفحة بكل محتوياته ، لكن هيكله وحالته يظلان دون تغيير.
- يمكن أن تكون عناصر تحديد المواقع مفيدة جدا عند إنشاء كتل غير مرئية على صفحة الويب. طريقة واحدة لجعل كتلة غير مرئية هي استخدام خصائص كس لتغيير موقفها وحجمها بحيث يكون خارج منطقة العرض.
- الرؤية: مخفي
- لتعيين إحداثيات العنصر. لجعل عنصر غير مرئي ، يمكنك تعيين أبعاده إلى صفر أو تعيين خاصية
- مؤشر ض
لتغيير ترتيب طبقات العنصر.
تحديد المواقع الثابتة: لا يغير العنصر ذو الموضع الثابت موضعه عند التمرير في الصفحة. لجعل عنصر غير مرئي ، يمكنك تغيير حجمه إلى صفر أو تعيين خاصية
الرؤية: مخفي
.
يمكن أن يكون استخدام الموضع مناسبا جدا إذا كنت تريد جعل الكتلة غير مرئية. ومع ذلك ، يجب أن نتذكر أن تغيير موضع وحجم العنصر باستخدام تحديد المواقع يمكن أن يؤثر على بقية عناصر الصفحة والترتيب الذي يتم عرضها به.
تعطيل عنصر باستخدام السمة " معطل
- السمة" معطل " هي إحدى الطرق لتعطيل عنصر على صفحة الويب بشكل مؤقت أو دائم. عندما يتم تمييز عنصر بالسمة" معطل " ، لا يمكن للمستخدم التفاعل معه ، ويتوقف عن النشاط ولا يرسل البيانات إلى الخادم.
- مثال على العناصر التي يمكن تطبيق السمة" معطل " عليها هي الأزرار وحقول إدخال النص ومربعات الاختيار وأزرار الاختيار والقوائم المنسدلة وعناصر التحكم الأخرى.
- يعد استخدام السمة" معطل " مفيدا بشكل خاص عندما تحتاج إلى تعطيل عنصر في الصفحة مؤقتا أثناء معالجة أي إجراءات أو عمليات فحص من جانب العميل. على سبيل المثال ، يمكنك تعطيل زر إرسال النموذج حتى يتم ملء جميع الحقول المطلوبة بشكل صحيح.
- لتطبيق السمة" معطل " على عنصر، تحتاج إلى تحديده في علامة الفتح الخاصة به ، على سبيل المثال:
- زر: إرسال
حقل إدخال النص:
العلم:
التبديل:
القائمة المنسدلة: …
ومع ذلك ، قد يختلف المظهر المرئي لعنصر مع السمة "معطل" في متصفحات مختلفة. عادة ما تكون العناصر المعطلة رمادية ولا تستجيب لتفاعل المستخدم.
بالإضافة إلى السمة" معطل "، هناك أيضا سمة" للقراءة فقط " ، مما يجعل العنصر للقراءة فقط ، ولكنه لا يزال يسمح للمستخدم بالتفاعل معه.
استخدم السمة" معطل " عندما تحتاج إلى تعطيل عنصر بشكل مؤقت أو دائم ومنع إدخال المستخدم.
سؤال وجواب
كيف يمكنني جعل كتلة غير مرئية على صفحة ويب?
هناك عدة طرق لجعل الكتلة غير مرئية على صفحة الويب. واحدة من أبسط هو تعيين الخاصية "عرض" إلى "لا شيء" في نمط كس من هذه الكتلة. سيؤدي ذلك إلى جعل الكتلة غير مرئية ولن تشغل مساحة على الصفحة.
كيف يمكنني جعل كتلة غير مرئية, ولكن في نفس الوقت الحفاظ على حجمها وموقعها?
إذا كنت بحاجة إلى جعل كتلة غير مرئية ، ولكن في نفس الوقت الحفاظ على حجمها وموقعها على صفحة ويب ، يمكنك تعيين شفافية كتلة في نمط كس. للقيام بذلك ، قم بتعيين قيمة خاصية "التعتيم" على 0 ، مما يجعل الكتلة غير مرئية ، ولكن يوفر مساحتها على الصفحة. لحفظ موقع الكتلة ، يمكنك أيضا استخدام خاصية "الرؤية" بالقيمة "مخفي" ، والتي ستخفي الكتلة ، مع الاحتفاظ بحجمها وموقعها.
يمكن لمستخدمي الأجهزة المختلفة رؤية كتلة غير مرئية?
كتلة غير مرئية تم إنشاؤها باستخدام خاصية كس " عرض: لا شيء " ، سيتم إخفاؤه عن مستخدمي أي أجهزة — أجهزة الكمبيوتر أو الأجهزة اللوحية أو الهواتف الذكية. ومع ذلك ، يجدر النظر في أنه يمكن للمستخدمين تغيير أنماط الصفحة باستخدام أدوات مطور المتصفح وجعل الكتلة المخفية مرئية.