نمط الخاصية borderStyle
مثال
أضف حدًا "متصلًا" إلى عنصر <div>:
document.getElementById("myDiv").style.borderStyle = "solid";
التعريف والاستخدام
تقوم الخاصية borderStyle بتعيين أو إرجاع نمط حدود العنصر.
يمكن أن تأخذ هذه الخاصية من قيمة واحدة إلى أربع قيم:
- قيمة واحدة ، مثل: p {border-style: solid} - ستكون جميع الحدود الأربعة صلبة
- قيمتان ، مثل: p {border-style: solid dotted} - الحد العلوي والسفلي متصلان ، والحد الأيسر والأيمن سيكون منقّطًا
- ثلاث قيم ، مثل: p {border-style: solid dotted double} - الحد العلوي سيكون متصلًا ، والحد الأيسر والأيمن سيكون منقّطًا ، والحد السفلي سيكون مزدوجًا
- أربع قيم ، مثل: p {border-style: solid dotted double dashed} - الحد العلوي سيكون متصلًا ، والحد الأيمن سيكون منقّطًا ، والحد السفلي سيكون مزدوجًا ، والحد الأيسر سيكون متقطعًا
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| borderStyle | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
قم بإرجاع خاصية borderStyle:
object.style.borderStyle
قم بتعيين خاصية borderStyle:
object.style.borderStyle = value
قيم الملكية
| Value | Description |
|---|---|
| none | Defines no border. This is default |
| hidden | The same as "none", except in border conflict resolution for table elements |
| dotted | Defines a dotted border |
| dashed | Defines a dashed border |
| solid | Defines a solid border |
| double | Defines two borders. The width of the two borders are the same as the border-width value |
| groove | Defines a 3D grooved border. The effect depends on the border-color value |
| ridge | Defines a 3D ridged border. The effect depends on the border-color value |
| inset | Defines a 3D inset border. The effect depends on the border-color value |
| outset | Defines a 3D outset border. The effect depends on the border-color value |
| 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.borderStyle = "dotted solid double dashed";
مثال
قم بإرجاع نمط الحدود لعنصر <div>:
alert(document.getElementById("myDiv").style.borderStyle);
مثال
عرض لجميع القيم المختلفة:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
الصفحات ذات الصلة
دروس CSS: CSS Border
مرجع CSS: خاصية نمط الحدود
مرجع DOM HTML: خاصية الحدود
❮ نمط الكائن