دعونا نتحدث عن إضافة قواعد النمط ديناميكيًا مرة أخرى

اعتدت أن أقدم وظيفة مفيدة في منشور مدونة واحد ، وقد تم استخدامها على نطاق واسع في العديد من منشورات مدونتي. لقد قرأت كثيرًا مؤخرًا، لذلك كتبت هذه التدوينة لفرز الأشياء الجديدة التي تعلمتها.

ليس هناك شك في أنه بناءً على مبدأ فصل الأداء والهيكل، فإن استيراد ورقة أنماط جديدة مباشرةً هو الخيار الأفضل، ولكن في بعض الحالات لن ينجح ذلك، على سبيل المثال، إذا قمنا بإنشاء DIV قابل للسحب، من منظور تحديد الأنماط، يتم وضعه بشكل مطلق لمنعه من التأثير على تدفق المستند الأصلي، ثم قم بتغيير قيمه العليا واليسرى شيئًا فشيئًا لتحقيق تأثير الحركة. نظرًا لأن السحب له مفهوم زمني، وهو 24 إطارًا في الثانية، فمن المستحيل تضمين كل شيء في ورقة الأنماط. لذلك، من الضروري جدًا إنشاء قواعد النمط ديناميكيًا وتعديل قواعد النمط بسرعة. وقد قامت W3C بالكثير من العمل لهذا الغرض في DOM2.0.

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

• الأنماط الخارجية، تلك التي ذكرناها أعلاه، مكتوبة في ملف CSS منفصل.
• تتم كتابة الأنماط الداخلية بشكل مستقل في علامة نمط، ويتم وضعها عادةً في علامة الرأس. النمط الذي تم إنشاؤه بواسطة الوظيفة التي قدمتها أخيرًا هو النمط الداخلي.
• الأنماط المضمنة هي أنماط مكتوبة في سمة النمط للعنصر.

تتركز الواجهات المضافة حديثًا بشكل أساسي في الأنماط الخارجية - أقول الواجهات لأن التطبيقات المقابلة يتم توفيرها بواسطة المتصفح، مثل IE6 لا يتجاهلون وجودها أبدًا.

في نموذج W3C، تمثل علامة الارتباط وعلامة النمط من النوع "text/css" كائن CSSStyleSheet. يمكننا الحصول على جميع كائنات CSSStyleSheet في الصفحة الحالية من خلال document.styleSheets، ولكن هذه مجموعة وليست مجموعة بسيطة. صفيف. يحتوي كل كائن CSSStyleSheet على الخصائص التالية،

• النوع: يُرجع دائمًا سلسلة "text/css".
• معطل: له نفس تأثير تعطيل الإدخال، والإعداد الافتراضي هو خطأ.
• href: يُرجع عنوان URL، إذا كان علامة نمط، فهو فارغ.
• العنوان: يُرجع قيمة عنوانه. العنوان هو نفس عنوان العنصر العادي. يمكنك كتابة ما تريد.
• الوسائط: الأشياء التي أعادها IE وFirefox ليست متسقة، لذلك من الصعب تحديد ذلك. يتم استخدام الوسائط لتحديد الأجهزة التي تكون قواعد النمط الخاصة بها صالحة لها.
• OwnerRule: إرجاع كائن CSSRule للقراءة فقط إذا تم تقديم ورقة الأنماط باستخدام @import.
• cssRules: إرجاع مجموعة من كائنات قواعد النمط للقراءة فقط (كائنات CSSStyleRule).

تم تطوير كائن قاعدة النمط (كائن CSSStyleRule) بواسطة W3C لتعيين النمط بمزيد من التفاصيل، على سبيل المثال، الشيء التالي يتوافق مع كائن قاعدة النمط:

زر [نوع] {
الحشو: 4px 10px 4px 7px؛
ارتفاع الخط: 17 بكسل؛
}

يحتوي كائن قاعدة النمط على السمات الرئيسية التالية: النوع، cssText،parentStyleSheet،parentRule.

النوع يشبه إلى حد ما نوع العقدة، الذي يقسم قواعد النمط ويستخدم عددًا صحيحًا لتمثيل نوعه. الوضع المحدد هو على النحو التالي

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (تحديد كائن CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (تحديد كائن CSSSharsetRule، المستخدم لتعيين مجموعة الأحرف لورقة الأنماط الحالية، الافتراضي هو نفس صفحة الويب الحالية)
• 3: CSSRule.IMPORT_RULE (حدد كائن CSSImportRule، والذي يستخدمimport لتقديم أوراق الأنماط الأخرى)
• 4: CSSRule.MEDIA_RULE (تحديد كائن CSSMediaRule، المستخدم لتعيين ما إذا كان هذا النمط سيتم استخدامه للشاشات والطابعات وأجهزة العرض وما إلى ذلك)
• 5: CSSRule.FONT_FACE_RULE (حدد كائن CSSFontFaceRule، @font-face الخاص بـ CSS3)
• 6: CSSRule.PAGE_RULE (تحديد كائن CSSPageRule)

وغني عن القول أن cssText هي سمة مفيدة جدًا تقوم بتحويل السلاسل مباشرة إلى قواعد نمط، متجاهلة الاختلافات في سمات النمط لكل متصفح، مثل cssFloat وstyleFloat.

ParentStyleSheet وparentRule كلاهما مخصصان لـ @import. ومع ذلك، @import لديه مشاكل في IE، لذلك أنا لا أستخدمه بشكل أساسي.