هناك عمومًا طريقتان تقوم فيه JavaScript بالوصول إلى خصائص CSS: "الوصول من خلال العناصر" و "الوصول مباشرة إلى أوراق الأنماط". بالإضافة إلى ذلك ، هناك مشكلة لا يمكن تجاهلها عند الوصول إلى الأنماط - أنماط وقت التشغيل.
1. الوصول من خلال العناصر
نظرًا لأنك تريد الوصول إلى ورقة الأنماط من خلال العناصر ، يجب عليك أولاً تحديد العنصر الذي هو عليه. هذا هو محتوى DOM ، لذلك لن أقول المزيد عنها هنا. بعد الحصول على المرجع ، يمكنك الوصول إلى سمة معينة من خلال "reference.style. سمة للوصول". على سبيل المثال ، راجع الكود التالي.
<pre name = "code"> <pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height: 100px ؛ العرض: 100px ؛ لون الخلفية: أحمر. } </style> </head> <body> <div id = "a"> </viv> </body> </html>عندما نريد الحصول على لون الخلفية لـ #A ، يمكننا توثيق. بهذه الطريقة ، اكتمل الوصول. بعد ذلك ، سواء كنت سترجع أو تغيير قيمة السمة ، الأمر متروك لك.
2. الوصول المباشر إلى ورقة الأنماط
بشكل عام ، فإن الوصول المباشر إلى ورقة الأنماط هو "ابحث أولاً عن كتلة النمط المقابلة ، ثم ابحث عن قواعد النمط المقابلة في كتلة النمط ، وأخيراً ابحث عن النمط المقابل في قاعدة النمط."
دعنا نتحدث عن الكتل النمطية الأولى. في الكود ، سيكون رمز CSS موجودًا بين علامات <Style> </style> أو في <link> ، و A </sytor> </style> أو <Link> عبارة عن كتلة نمط. في الكود ، قد يتم ترتيب كتل التعليمات البرمجية المتعددة بالتسلسل من أعلى إلى أسفل ، ويمكننا الوصول إلى كتل نمط مثل عناصر الصفيف. على سبيل المثال ، إذا كنا نريد الوصول إلى أول واحد في كتلة النمط ، فيمكننا توثيق. أوراق [0]
ثم قل قواعد الأسلوب. انظر أولاً إلى الكود التالي
<pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height: 100px ؛ العرض: 100px ؛ لون الخلفية: أحمر. } #b {height: 100px ؛ العرض: 100px ؛ لون الخلفية: الأزرق. } </style> </head> <body> <div id = "a"> </viv> <div id = "b"> </viv> </body> </html>يحدد الرمز أنماط #A و #B على التوالي. مجموعة من أنماط #A أو مجموعة #B هي قاعدة نمط. في كتلة النمط هذه ، قاعدة النمط الأول لـ #A وقاعدة النمط الثاني لـ #B. يمكننا أيضًا الوصول إلى قواعد نمط كما يمكننا الوصول إلى عناصر الصفيف. على سبيل المثال ، إذا كنا نريد الوصول إلى قواعد نمط #B ، فيمكننا توثيق أوراق [0] .CSSRULES [1] بالطبع ، يمكنك اختيار كتابة مستند.
ثم يمكننا الوصول إلى النمط المقابل. على سبيل المثال ، إذا كنا نريد تغيير لون الخلفية لـ #B إلى الأخضر ، فيمكننا توثيق أوراق [0] .CSSRULES [1]
3. نمط وقت التشغيل
انظر إلى الكود التالي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height: 100px ؛ العرض: 100px ؛ اللون: أحمر. } #b {height: 100px ؛ العرض: 100px ؛ } </style> </head> <body> <div id = "a"> <div id = "b"> لاحظ لون الخط </div> </viv> </body> </html>عندما نقوم بتشغيل ALERT (document.getElementByID ("B"). style.color) ؛ ، نجد أنه لا يوجد شيء على النافذة المنبثقة ، ولكن من الواضح أن لون الخط في الصفحة أحمر. لماذا؟ وذلك لأن سمات كائن النمط لكل عنصر لا يتم تحديثها على الفور. عندما نريد إخراج اللون الأحمر على النافذة المنبثقة ، نحتاج إلى استخدام نمط وقت التشغيل. window.getComputedStyle (document.getElementById ("B") ، null). color حتى تتمكن من الوصول إلى "Red". هناك طريقة أخرى للوصول إلى مستند نمط وقت التشغيل. getElementById ("B"). CurrentStyle.Color ، ولكن بهذه الطريقة مدعومة فقط من قبل IE.