English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
styleتسجيل أو إرجاع النمط inline للعنصر.
هي تعودCSSStyleDeclarationالمعلمات، التي تحتوي على قائمة بجميع خصائص النمط للعنصر، وتعين القيم للخصائص المحددة في الخاصية inline style للعنصر.
إرجاع خاصية النمط:
element.style.property
تحديد خاصية النمط:
element.style.property = value
document.getElementById("demo").style.color = "blue";الاختبار أرى <‹/›ملاحظة:لا يمكن تعيين النمط من خلال تخصيص سلسلة للخاصية style، مثلالشئ.style="color:blue;". لتحديد النمط للعنصر، أضف خاصية "CSS" في النمط وحدد قيمة، مثلما هو موضح أدناه:
element.style.backgroundColor="blue"; // تعيين لون الخلفية للعنصر إلى أزرق
كما ترون، لغة JavaScript المستخدمة لتحديد خصائص CSS مختلفة قليلاً عن CSS (backgroundColor بدلاً من background-color).
للحصول على قائمة بجميع الخصائص المتاحة، راجعمرجع نمط.
ليس له خاصية style أهمية في فهم النمط الذي تطبقه على العنصر، لأنها تمثل فقط الاشارات CSS المحددة في الخاصية inline style للعنصر، وليس الاشارات CSS من القواعد الأخرى (مثل القواعد في هذا الفصل) أو القوائم الخارجية. للحصول على قيم جميع خصائص CSS للعنصر، يجب استخدامwindow.getComputedStyle().
لكن يمكن استخدام document.getElementsByTagName() للوصول إلى عناصر <style> من <head>:
var x = document.getElementsByTagName("style")[0]; // الحصول على العنصر <style> الأول
ملاحظة:يُنصح باستخدام خاصية style بدلاً منالعنصر .setAttribute("style", "...")الطريقة، لأن خاصية style لن تغطي الخاصية style التي قد تكون م指定ت مسبقًا من قبل CSS أخرى.
يدعم جميع المتصفحات الخاصية style بشكل كامل:
| الخاصية | |||||
| style | هو | هو | هو | هو | هو |
| القيمة | الوصف |
|---|---|
| القيمة | تحديد قيمة الخاصية المحددة. على سبيل المثال، بالنسبة للخاصية border: الشئ.style.border="5px أزرق نقي"; |
| القيمة المقدمة: | واحدCSSStyleDeclarationمثلث يمثل خصائص النمط للعنصر |
|---|---|
| إصدار DOM: | نموذج CSS (CSSOM) |
الحصول على قيمة الحافة العلوية للعنصر <p>:
var x = document.getElementById("demo").style.borderTop;الاختبار أرى <‹/›استخدامالعنصر استخدام .setAttribute() لضبط النمط CSS:
var div = document.querySelector("#myDiv");
div.setAttribute("style", "color:red; border: 1px solid blue;");الاختبار أرى <‹/›دليل CSS:دليل CSS
مرجع CSS:كامل خصائص CSS
مرجع HTML:خصائص النمط لـ HTML
مرجع HTML:علامة <style> لـ HTML