ملخص الأساليب الأصلية للحصول على الأساليب في جافا سكريبت

ملاحظة: إنه للحصول على النمط ، وليس لضبط النمط. إذا لم يتم تعيين قيمة نمط للعنصر ، فسيتم إرجاع القيمة الافتراضية التي قدمها المتصفح. (تم فرز المنتدى)

1. element.style: لا يمكن الحصول على قيمة النمط المكتوبة في سمة النمط في علامة العنصر. لا يمكن الحصول على سمة النمط المحددة في <style> </style> وتحميلها من خلال <link href = "css.css">.

نسخة الكود كما يلي:

var ele = document.getElementById ('eLe') ؛

ele.style.Color ؛ // احصل على اللون

2. window.getComputedStyle (): يمكنه الحصول على جميع قيم سمة CSS النهائية للعنصر الحالي.

نسخة الكود كما يلي: window.getComputedStyle ("element" ، "pseudo-class") ؛

تقبل هذه الطريقة معلمتين: للحصول على عنصر النمط المحسوب وسلسلة العناصر الزائفة (على سبيل المثال ": قبل"). إذا لم تكن معلومات العناصر الزائفة مطلوبة ، فيمكن أن تكون المعلمة الثانية خالية. يمكن أيضًا استخدامه عبر document.defaultView.getComputedStyle ("element" ، "pseudo-class") ؛

نسخة الكود كما يلي:

var ele = document.getElementById ('eLe') ؛

var styles = window.getComputedStyle (eLe ، null) ؛

الأنماط. // احصل على اللون

يمكنك استخدام Style.Length لعرض عدد الأنماط الافتراضية للمتصفح. لا يدعم IE6-8 هذه الطريقة ، ويجب استخدام الطريقة التالية. بالنسبة إلى Firefox و Safari ، سيتم تحويل اللون إلى تنسيق RGB.

3. element.currentStyle: خاص لـ IE ، فإنه يعيد قيمة سمة CSS النهائية للعنصر المطبق حاليًا (بما في ذلك ملف CSS الخارجي ، <style> المدمج في الصفحة ، إلخ).

نسخة الكود كما يلي:

var ele = document.getElementById ('eLe') ؛

var styles = ele.currentStyle ؛

الأنماط.

ملاحظة: للحصول على حدود السمة الشاملة ، وما إلى ذلك ، أي إرجاع غير محدد. بعض المتصفحات الأخرى تُرجع القيم ، وبعضها لا يعود ، ولكن سمات مثل قيم إرجاع Bordleftwidth.

4. getPropertyValue (): احصل على اسم الخاصية المباشرة لأسلوب CSS

نسخة الكود كما يلي:

var ele = document.getElementById ('eLe') ؛

window.getComputedStyle (eLe ، null) .getPropertyValue ('color') ؛

ملاحظة: لا يدعم اسم السمة تنسيق الجمل ، IE6-8 لا يدعم هذه الطريقة ، وبالتالي فإن الطريقة التالية مطلوبة

5.

نسخة الكود كما يلي:

var test = document.getElementById ('test') ؛

window.getComputedStyle (اختبار ، null) .getPropertyValue ("BackgroundColor") ؛

ملاحظة: هذه الطريقة تدعم فقط IE6-8.

أسلوب الحصول على النمط التالي متوافق مع IE ، Chrome ، Firefox ، إلخ.

نسخة الكود كما يلي:

وظيفة getStyle (ele) {

var style = null ؛

if (window.getComputedStyle) {

style = window.getComputedStyle (ele ، null) ؛

}آخر{

النمط = ele.currentStyle ؛

}

نمط العودة

}

في jQuery ، يتم استخدام CSS () بشكل شائع للحصول على خصائص نمط ، وتطبق تشغيلها الأساسي أساليب GetComputedStyle و GetPropertyValue.