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

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

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