هناك طريقتان لإخفاء عناصر التحكم باستخدام JavaScript، إحداهما عن طريق تعيين سمات "العرض" و"الرؤية" لنمط عنصر التحكم. يكون عنصر التحكم مرئيًا عندما يكون style.display="block" أو style.visibility="visible"، ويكون غير مرئي عندما يكون style.display="none" أو style.visibility="hidden". الفرق هو أن "العرض" لا يخفي عنصر التحكم فحسب، بل لم يعد عنصر التحكم المخفي يشغل الموضع الذي يشغله عند العرض، في حين أن عنصر التحكم المخفي بواسطة "الرؤية" يضبط عنصر التحكم ليكون غير مرئي فقط، ولا يزال عنصر التحكم يحتل مكانه الأصلي موضع.
انسخ رمز الكود كما يلي:
عرض الوظيفةHideUI()
{
var ui = document.getElementById("bbs");
ui.style.display="none";
}
عرض الدالةShowUI()
{
var ui = document.getElementById("bbs");
ui.style.display=" "";// ستعمل إذا كانت الشاشة فارغة، ولكن إذا كانت عبارة عن كتلة، فسيتم التفاف المساحة التالية.
}
رؤية الوظيفةHideUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="hidden";
}
وظيفة الرؤيةShowUI ()
{
var ui = document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>
وصف القيمة
لا شيء لن يتم عرض هذا العنصر.
block سيتم عرض هذا العنصر كعنصر على مستوى الكتلة مع فواصل أسطر قبل هذا العنصر وبعده.
الافتراضي المضمن. سيتم عرض هذا العنصر كعنصر مضمّن بدون فواصل أسطر قبل العنصر أو بعده.
عنصر الكتلة المضمنة. (قيمة جديدة في CSS2.1)
عنصر القائمة سيتم عرض هذا العنصر كقائمة.
run-in سيظهر هذا العنصر كعنصر على مستوى الكتلة أو كعنصر مضمن، حسب السياق.
مضغوط هناك قيمة مدمجة في CSS، ولكن تمت إزالتها من CSS2.1 بسبب عدم وجود دعم واسع النطاق.
هناك علامة قيمة في CSS، ولكن تمت إزالتها من CSS2.1 بسبب عدم وجود دعم واسع النطاق.
table سيتم عرض هذا العنصر كجدول على مستوى الكتلة (مشابه لـ <table>)، مع فواصل الأسطر قبل الجدول وبعده.
inline-table سيتم عرض هذا العنصر كجدول مضمّن (على غرار <table>)، بدون فواصل أسطر قبل الجدول وبعده.
table-row-group سيتم عرض هذا العنصر كمجموعة مكونة من صف واحد أو أكثر (على غرار <tbody>).
table-header-group سيتم عرض هذا العنصر كمجموعة مكونة من صف واحد أو أكثر (على غرار <thead>).
table-footer-group سيتم عرض هذا العنصر كمجموعة مكونة من صف واحد أو أكثر (على غرار <tfoot>).
صف الجدول سيتم عرض هذا العنصر كصف جدول (مشابه لـ <tr>).
table-column-group سيتم عرض هذا العنصر كمجموعة مكونة من عمود واحد أو أكثر (على غرار <colgroup>).
عمود الجدول سيتم عرض هذا العنصر كعمود خلية (على غرار <col>)
خلية الجدول سيتم عرض هذا العنصر كخلية جدول (على غرار <td> و<th>)
تسمية توضيحية للجدول سيتم عرض هذا العنصر كعنوان جدول (مشابه لـ <caption>)
يحدد المعامل inherit أن قيمة سمة العرض يجب أن تكون موروثة من العنصر الأصلي.