• 0

ماهو الفرق بين visibility:hidden و display:none ؟

في برمجة ملف التنسيق css أجد أن لا فرق بين visiblity:hidden و display:none لأن العنصر يختفي في كلا الحالتين، فهل من اختلاف بين الخاصيتين - أتحدث عن الجانب التقني - أم أنهمامتشابهان؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

display:none : هذه الخاصية تعني أن الوسم لا يوجد في الصفحة، ولا يأخذ أي حيز منها، رغم أنه يمكن الوصول إليه عن طريق DOM من خلال JavaScript.

بخلاف visibility:hidden فالعنصر موجود بالصفحة إلا أنه غير مرئي، ويمكن إظهار عن طريق تغيير الخاصية.

كمثال عن الفرق بين الخاصيتين:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

حيث سنعوض

[style-tag-value]

بكلى الخاصيتين لنرى الفرق.

  • في حالة
display:none

نحصل على:   test |   | test

  • في حالة
visibility:hidden

نحصل على test |                        | test

أي أن الوسم موجود في الحالة الثانية لكنه لا يظهر، ويأخذ حيزاً من الصفحة، عكس الحالة الأولى.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن