1. تغيير النمط جزئيًا
هناك ثلاثة أنواع: تغيير النمط المباشر، وتغيير اسم الفئة، وتغيير cssText. الأشياء التي يجب ملاحظتها هي:
انتبه إلى الكتابة بالأحرف الكبيرة:
جافا سكريبت حساسة للغاية لحالة الأحرف. لا يمكن لـ ClassName كتابة "N" كـ "n"، ولا يمكن لـ cssText كتابة "T" كـ "t"، وإلا فلن يمكن تحقيق التأثير.
طريقة الاتصال:
إذا قمت بتغيير className، قم بإعلان الفئة في ورقة الأنماط مسبقًا، لكن لا تتبع النمط عند الاتصال، فهذا خطأ! يمكن كتابته فقط على النحو التالي: document.getElementById('obj').className = "..."
تغيير نص css
ولكن إذا كنت تستخدم cssText، فيجب عليك إضافة النمط، والطريقة الصحيحة لكتابته هي: document.getElementById('obj').style.cssText=”…”
لا أحتاج للحديث عن تغيير الأسلوب المباشر، فقط تذكر أن تكتب النمط المحدد، مثل
انسخ رمز الكود كما يلي:
document.getElementById('obj').style.backgroundColor=”#003366″
2. تغيير النمط عالميًا
عادةً، يمكننا تحقيق التبديل في الوقت الفعلي لأنماط صفحات الويب عن طريق تغيير قيمة href لنمط الارتباط الخارجي، أي "تغيير نمط القالب". في هذا الوقت نحتاج أولاً إلى إعطاء معرف للهدف الذي يحتاج إلى تغيير، مثل
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
من السهل جدًا الاتصال، مثل
<span on click="javascript:document.getElementById('css').href = 'ie.css'">انقر فوقي لتغيير النمط</span>
غالبًا لا يعرف المبتدئون كيفية كتابة أنماط CSS معينة في JavaScript، وأحيانًا تختلف المتطلبات باختلاف المتصفحات. على سبيل المثال، يتم كتابة التعويم كـ styleFloat في IE وcssFloat في FIREFOX، الأمر الذي يتطلب تراكم الجميع. البحث عن "ccvita javascript" في Google قد يساعد في حل شكوكك.
المعرفة الأساسية
توجد عادة ثلاث طرق لاستدعاء أوراق الأنماط في صفحات الويب.
الأول: الارتباط بملف ورقة أنماط خارجية (الارتباط بورقة أنماط)
يمكنك أولاً إنشاء ملف ورقة أنماط خارجي (.css) ثم استخدام كائن ارتباط HTML. الأمثلة هي كما يلي:
انسخ رمز الكود كما يلي:
<الرأس>
<title>عنوان الوثيقة</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
في XML، يمكنك إضافته في منطقة الإعلان كما هو موضح في المثال التالي:
انسخ رمز الكود كما يلي:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
النوع الثاني: تحديد كائن كتلة النمط الداخلي (تضمين كتلة النمط)
يمكنك إدراج أ
كائن كتلة. للتعرف على طرق التعريف، يرجى الرجوع إلى بناء جملة ورقة الأنماط. الأمثلة هي كما يلي:
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<title>عنوان الوثيقة</title>
<نمط النوع = "نص/CSS">
<!--
الجسم {الخط: 10pt "Arial"}
h1 {الخط: 15pt/17pt "Arial"؛ وزن الخط: غامق؛
h2 {الخط: 13pt/15pt "Arial";
ع {الخط: 10pt/12pt "Arial"؛
-->
</نمط>
</الرأس>
<الجسم>
</body></html>
يرجى ملاحظة أن تعيين سمة النوع لكائن النمط على "text/css" يسمح للمتصفحات التي لا تدعم هذا النوع بتجاهل ورقة الأنماط.
النوع الثالث: التعريف المضمن (Inline Styles)
التعريف المضمن هو استخدام سمة نمط الكائن ضمن علامة الكائن لتحديد سمات ورقة الأنماط التي تنطبق عليه. الأمثلة هي كما يلي:
انسخ رمز الكود كما يلي:
<p style="margin-left: 0.5in; Margin-right:0.5in">لقد أضاف هذا الخط تصحيحات خارجية لليسار واليمين</p><p> </p>