تعديل أنماط CSS
على جدار المشغل شريحة لون جاهزة. العنوان Oak والنص على العيّنة open. قاعدة #swatch في ورقة الأنماط تجعل اللون navy والحجم 16px. الصنف dusk غير موجود بعد، وقاعدته font-style: italic. تغيير التنسيق من هنا يعني كتابة الإعلان الداخلي أو إضافة هذا الصنف. كلمة open تبقى كما هي.
element.style يعرض الإعلان الداخلي فقط. لذلك swatch.style.color وswatch.style.fontSize نصّان فارغان قبل أي كتابة. الحجم المستخدم يأتي من getComputedStyle(swatch).fontSize وهو 16px.
swatch.style.color = "teal" وswatch.style.fontSize = "22px" يحفظان القيمتين داخل العنصر. كتابة style.font-size بنقطة خطأ نحوي. الخلفية تُضبط بـ setProperty("background-color", "wheat"). بعد ذلك يقرأ getPropertyValue("background-color") وstyle.backgroundColor القيمة wheat.
classList.add("dusk") يضيف الصنف فقط. style.color يبقى teal وstyle.fontStyle يبقى فارغًا، بينما getComputedStyle(swatch).fontStyle يصير italic.
تجربة جانبية: cssText = "color: maroon;". هذا السطر يستبدل كل الإعلان الداخلي، فيختفي الحجم والخلفية الداخليان ويبقى الصنف dusk. عرض الصفحة لا يشغّل هذا السطر. يحفظ teal ثم removeProperty("color") يمسح اللون الداخلي وحده. السطر تحت الشريحة يصير teal / 22px / empty / dusk. نص العيّنة ما زال open.
إعلان التنسيق، لا جملة جديدة على الشريحة
الصفحة السابقة كتبت textContent وinnerHTML وinsertAdjacentHTML وغيّرت كلمات ورقة العبّارة. هنا لا تسند textContent إلى العيّنة، ولا تحلّل وسمًا، ولا تقارن طرق الالتقاط. getElementById يعطيك الشريحة فقط. الدرس هو الإعلان الداخلي ورمز الصنف.
ماذا يترك كل كتابة على العيّنة
تبدأ العيّنة بكلمة open. اللون navy والحجم 16px من ورقة الأنماط، ولا يوجد تنسيق داخلي بعد. اقرأ الصفوف بالترتيب. صف cssText تجربة جانبية. عرض الصفحة يتوقف عند removeProperty ولا يشغّل ذلك المسح.
📊 ماذا يترك كل كتابة على العيّنة
| الكتابة | سلسلة التنسيق الداخلي | ما زال من الورقة أو من الصنف | الخلط السهل |
|---|---|---|---|
| قبل أي كتابة | color وfontSize يساويان "" |
fontSize المحسوب 16px؛ اللون المستخدم navy |
قراءة navy من style.color |
style.color = "teal" وstyle.fontSize = "22px" |
teal و22px |
الخلفية ليست داخلية بعد | style.font-size لا تُحلَّل |
setProperty("background-color", "wheat") |
backgroundColor يساوي wheat |
اللون ما زال teal | اسم background-color بدل الاسم المحدود |
classList.add("dusk") |
fontStyle يبقى ""؛ اللون يبقى teal |
fontStyle المحسوب italic |
انتظار italic داخل style.fontStyle |
removeProperty("color") |
color يعود "" |
fontSize يبقى 22px |
ظن أن الحجم يرجع إلى 16px |
style.cssText = "color: maroon;" |
اللون maroon؛ fontSize والخلفية "" |
صنف dusk يبقى |
ظن أن cssText يحذف الصنف |
element.style هو الإعلان الداخلي فقط. قاعدة الورقة لا تظهر هناك حتى ينسخها السكربت إلى التنسيق الداخلي. getComputedStyle يقرأ القيمة المستخدمة بعد اجتماع الورقة والصنف والتنسيق الداخلي. الخاصية الداخلية تغلب الورقة لنفس الخاصية. classList يعدّل رمز الصنف ولا يكتب style.color ولا style.fontStyle. cssText يستبدل سمة التنسيق كلها بسلسلة واحدة. removeProperty يحذف خاصية داخلية واحدة ويترك الباقي.
اقرأ الشريحة قبل الكتابة
يفتح الملف بالعنوان Oak ونص open والورقة أعلاه. لم يُسنَد شيء بعد. السجلات الثلاثة الأولى تسأل التنسيق الداخلي. السجل الرابع يسأل الحجم المستخدم.
let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);
السجلات هي open، سلسلة فارغة، سلسلة فارغة، و16px. اللون المستخدم navy ويكتبه المتصفح بصيغة rgb() لا بكلمة navy. style.color ما زال فارغًا، فذلك السجل ليس navy. العنوان Oak عنصر آخر. الكتابات اللاحقة لا تغيّر كلمة open.
الاسم المحدود يكتب القيم الداخلية
color وfontSize خاصيتان لإعلان التنسيق. اسم CSS font-size يصير fontSize في JavaScript. النقطة في style.font-size تعني طرحًا، لذلك الملف لا يستخدمها.
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
السجلات teal و22px وسلسلة فارغة. الخلفية لم تُضبط بعد. الحجم المستخدم صار 22px لأن القيمة الداخلية تغلب 16px في الورقة. الكلمة على العيّنة ما زالت open.
الاسم المشروط يمر عبر setProperty
يأخذ setProperty اسم خاصية CSS مع الشرطة. getPropertyValue يقرأ الاسم نفسه. الخاصية backgroundColor تقرأ القيمة التي خزنتها للتو.
let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);
كلا السجلين wheat. color ما زال teal وfontSize ما زال 22px. هذا الاستدعاء يضيف خاصية داخلية واحدة ولا يمسح ما سبق.
الصنف لا يملأ style.fontStyle
تقول .dusk إن font-style: italic. إضافة الصنف تضع الرمز dusk على العنصر. قيمة italic تعيش في قاعدة الورقة، فتبقى سلسلة fontStyle الداخلية فارغة. اللون الداخلي ما زال teal، أي أن الصنف لم يستبدله.
let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);
السجلات true وteal وسلسلة فارغة وitalic. contains يفحص الرمز. style.fontStyle يفحص الإعلان الداخلي. getComputedStyle يفحص القيمة المستخدمة. القراءات الثلاث مختلفة.
cssText يستبدل التنسيق الداخلي كله
هذه الكتلة تجربة جانبية. شغّلها فقط بعد ضبط teal و22px وwheat وdusk. إسناد cssText يكتب سمة style جديدة ويسقط كل خاصية داخلية ليست في تلك السلسلة. عرض الصفحة في الأسفل لا يتضمن هذا السطر.
let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));
السجلات maroon وسلسلة فارغة وسلسلة فارغة وtrue. اختفى 22px الداخلي وwheat. الصنف dusk ما زال موجودًا لأن cssText يعدّل سمة style لا سمة class. نص العيّنة ما زال open.
سطر واحد تحت الشريحة
السكربت في آخر body بعد وجود الشريحة والورقة. يضبط teal و22px وwheat، ويضيف dusk، ويحفظ كلمة teal، ثم يزيل اللون الداخلي فقط. لا يسند cssText. يكتب اللون الداخلي الفارغ بكلمة empty ليبقى السطر مقروءًا.
<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>
يقرأ السطر teal / 22px / empty / dusk. يحتفظ saved بـ teal من قبل removeProperty. بعد الاستدعاء يصير style.color فارغًا ويبقى style.fontSize مساويًا 22px. الخلفية ما زالت wheat. رمز الصنف ما زال dusk، فـ font-style المستخدم italic. يعود اللون المستخدم إلى الورقة، أي navy، لأن اللون الداخلي زال. نص العيّنة ما زال open. الصفحة التالية تبني عناصر جديدة ولا تضيف طريقة أخرى لكتابة هذه الخصائص.
افحص الشريحة
- سجّل النص والسلسلتين الداخليتين والحجم المحسوب، وتوقّع open وسلسلتين فارغتين و16px
- اضبط اللون على teal وfontSize على 22px، وتوقّع teal و22px وbackgroundColor فارغًا
- اضبط الخلفية بـ setProperty وتوقّع wheat من القراءتين، ثم أضف dusk وتوقّع true وteal وfontStyle فارغًا وitalic محسوبًا
- في التجربة الجانبية أسند cssText إلى اللون maroon وتوقّع maroon وfontSize فارغًا وخلفية فارغة وبقاء dusk
- اقرأ سطر الصفحة وتوقّع teal / 22px / empty / dusk، واقرأ نص العيّنة وتوقّع open
زلات هذه الشريحة
الصفحة تبقى مفتوحة. الكتابة من النوع الخطأ.
- قراءة
style.colorفي البداية وتوقّع navy - كتابة
swatch.style.font-sizeفيرفضها المحلّل - توقّع أن
classList.add("dusk")يخزّن italic فيstyle.fontStyle - توقّع أن إضافة الصنف تغيّر
style.colorعن teal - إسناد
cssTextوتوقّع بقاء الحجم الداخلي22px - إسناد
cssTextوتوقّع اختفاء صنفdusk - استدعاء
removeProperty("color")وتوقّع رجوعfontSizeإلى16px - ضبط
textContentعلى العيّنة هنا؛ الصفحة السابقة غيّرت الكلمات - استدعاء
createElementهنا؛ الصفحة التالية تبني عقدًا جديدة
خذ معك هذا
element.styleيقرأ الإعلان الداخلي، فـstyle.colorفي البداية فارغ والحجم المستخدم16pxstyle.colorوstyle.fontSizeيحفظان teal و22pxsetProperty("background-color", "wheat")يطابقstyle.backgroundColorclassList.add("dusk")يتركstyle.fontStyleفارغًا والتنسيق المستخدم italiccssText = "color: maroon;"يمسح القيم الداخلية الأخرى ويبقي الصنفremoveProperty("color")يمسح اللون فقط، لذلك يستطيع سطر الصفحة أن يُظهر22px- السطر يقرأ teal / 22px / empty / dusk ونص العيّنة يبقى open
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى