خاصية رؤية النمط
مثال
إخفاء محتوى عنصر <p>:
document.getElementById("myP").style.visibility = "hidden";
التعريف والاستخدام
تحدد خاصية الرؤية ما إذا كان يجب أن يكون العنصر مرئيًا أو تعيده.
تسمح خاصية الرؤية للمؤلف بإظهار عنصر أو إخفائه. إنه مشابه لخاصية العرض . ومع ذلك ، فإن الاختلاف هو أنه إذا قمت بتعيين display:none، فإنه يخفي العنصر بأكمله ، بينما visibility:hiddenيعني أن محتويات العنصر ستكون غير مرئية ، ولكن يظل العنصر في موضعه وحجمه الأصليين.
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
إعادة خاصية الرؤية:
object.style.visibility
قم بتعيين خاصية الرؤية:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
قيم الملكية
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | مرئي |
|---|---|
| قيمة الإرجاع: | سلسلة ، تمثل ما إذا كان محتوى العنصر معروضًا أم لا |
| إصدار CSS | CSS2 |
مزيد من الأمثلة
مثال
الفرق بين خاصية العرض وخاصية الرؤية:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
مثال
التبديل بين إخفاء عنصر وإظهاره:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
مثال
إخفاء وإظهار عنصر <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
مثال
قم بإرجاع نوع الرؤية لعنصر <p>:
alert(document.getElementById("myP").style.visibility);
الصفحات ذات الصلة
برنامج CSS التعليمي: عرض CSS ووضوح الرؤية
مرجع CSS: خاصية الرؤية
❮ نمط الكائن