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

ملخص:

أثناء عملية التطوير ، غالبًا ما نواجه نمط عناصر DOM من خلال JS. هناك العديد من الطرق ، مثل: عن طريق تغيير فئة عناصر DOM. الآن نناقش JS الأصلي للحصول على نمط CSS لعناصر DOM ، لاحظ أنه ليس إعدادًا

قبل البدء ، دعنا نتحدث أولاً عن الحصول على جميع كائنات سمة CSS التي يتم تطبيقها أخيرًا على العنصر. إذا لم يتم ضبط نمط على العنصر ، فسيتم إرجاع النمط الافتراضي للمتصفح.

1.lele.Style

عند تعلم DOM ، أرى أن قيم نمط العنصر يتم الحصول عليها من خلال ele.style ، ولكن في بعض الأحيان ما أحصل عليه ليس قيم نمط العقدة ، ولكن القيمة الفارغة. هذا لأن ele.style لا يمكن أن تحصل إلا على قيمة النمط المكتوبة في سمة النمط في علامة العنصر ، ولا يمكن الحصول على سمات النمط المحددة في <style> </style> وتحميلها من خلال <link href = "css.css">

مثال:

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

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

// احصل على لون العقدة

Test.Style.Color ؛

2. getComputedStyle ()

GetComputedStyle هي قيمة سمة CSS التي يمكن أن تحصل على جميع قيم سمة CSS المستخدمة للعنصر الحالي.

بناء الجملة كما يلي:

window.getComputedStyle ("element" ، "pseudo-class") ؛

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

مثال:

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

var test = document.getElementById ("Test") ،

demo = window.getComputedStyle (اختبار ، فارغ) ؛

// احصل على لون العقدة

Demo.Color

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

3. ele.CurrentStyle

CurrentStyle هي سمة لمتصفح IE نفسه. بناء الجملة يشبه ele.style. الفرق هو أن element.currentStyle إرجاع قيمة سمة CSS النهائية للعنصر المطبق حاليًا (بما في ذلك ملف الارتباط الخارجي CSS ، سمة <Style> مضمنة في الصفحة ، إلخ).

القواعد:

var style = dom.currentStyle ؛

مثال:

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

var test = document.getElementById ("Test") ،

demo = test.currentStyle ؛

// احصل على لون العقدة

Demo.Color ؛

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

4. getPropertyValue ()

GetPropertyValue يحصل على اسم الخاصية المباشرة لنمط CSS

بناء الجملة كما يلي:

window.getComputedStyle (العنصر ، null) .getPropertyValue (خاصية)

مثال:

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

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

window.getComputedStyle (اختبار ، null) .getPropertyValue ("خلفية اللون") ؛

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

5. getAttribute

يشبه GetAttribute GetPropertyValue ، أحد الاختلافات هو تنسيق الإبل لاسم العقار

مثال:

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

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

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

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

ملخص:

طريقة JQuery CSS () ، تستخدم العملية الأساسية أساليب GetComputedStyle وطرق GetPropertyValue. عندما نستخدم تطوير JS الأصلي ، يمكننا الحصول على قيمة العنصر من خلال الطرق المذكورة أعلاه.

فيما يلي طريقة متوافقة مع IE و Firefox و Chrome والمتصفحات الأخرى للحصول على أنماط العناصر ، والتي يمكن تطبيقها على المشروع

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

وظيفة getStyle (ele) {

var style = null ؛

if (window.getComputedStyle) {

style = window.getComputedStyle (ele ، null) ؛

}آخر{

النمط = ele.currentStyle ؛

}

نمط العودة

}