خاصية عرض النمط
مثال
اضبط عرض عنصر <button>:
document.getElementById("myBtn").style.width = "300px";
التعريف والاستخدام
تحدد خاصية العرض عرض العنصر أو تعيده.
تؤثر خاصية العرض فقط على عناصر مستوى الكتلة أو على العناصر ذات الموضع المطلق أو الثابت. يمكن معالجة المحتوى الفائض بخاصية الفائض.
نصيحة: استخدم خاصية الارتفاع لتعيين ارتفاع عنصر أو إرجاعه.
دعم المتصفح
Property | |||||
---|---|---|---|---|---|
width | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
قم بإرجاع خاصية العرض:
object.style.width
قم بتعيين خاصية العرض:
object.style.width = "auto|length|%|initial|inherit"
قيم الملكية
Value | Description |
---|---|
auto | The browser sets the width. This is default |
length | Defines the width in length units |
% | Defines the width in % of the parent element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
القيمة الافتراضية: | تلقاءي |
---|---|
قيمة الإرجاع: | سلسلة ، تمثل عرض العنصر |
إصدار CSS | CSS1 |
مزيد من الأمثلة
مثال
تغيير عرض عنصر <div>:
document.getElementById("myDIV").style.width = "500px";
مثال
تغيير ارتفاع وعرض عنصر <img>:
document.getElementById("myImg").style.height = "300px";
document.getElementById("myImg").style.width = "300px";
مثال
قم بإرجاع عرض عنصر <img>:
alert(document.getElementById("myImg").style.width);
الصفحات ذات الصلة
دروس CSS: أبعاد CSS
دروس CSS: نموذج صندوق CSS
مرجع CSS: خاصية العرض
❮ نمط الكائن