اذهب إلى المحتوى
  • 0

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

K@m@l

السؤال

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...