جافاسكربتتعديل تصميم العناصر

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element هنا قمنا بتغيير بعض خصائص العنصر الذي يمثله المتغير
element.style.color = 'blue';
element.style.fontFamily = 'Arial';
element.style.fontWeight = 'bold';

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير highlight هنا قمنا بإضافة الكلاس
element.classList.add('highlight');

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير highlight-border و highlight هنا قمنا بإضافة الكلاس
element.classList.add('highlight', 'highlight-border');

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element من العنصر الذي يمثله المتغير highlight هنا قمنا بإزالة الكلاس
element.classList.remove('highlight');

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element من العنصر الذي يمثله المتغير highlight-border و highlight هنا قمنا بإزالة الكلاس
element.classList.remove('highlight', 'highlight-border');

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// highlight يتناوب على استخدام الكلاس element هنا قمنا بجعل العنصر الذي يمثله المتغير
// للعنصر لأنه في الأساس لا يستخدمه highlight في حالتنا سنلاحظ أنه سيتم إضافة الكلاس
element.classList.toggle('highlight');

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// أم لا highlight و معرفة ما إن كان يستخدم الكلاس element هنا قمنا بفحص العنصر الذي يمثله المتغير
// لأنه يستخدم هذا الكلاس true و التي في حالتنا ستكون result نتيجة الفحص قمنا بتخزينها في المتغير
var result = element.classList.contains('highlight');

// في آخر الصفحة result هنا قمنا بطباعة قيمة المتغير
document.write(`result = ${result}`);

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// فقط danger يستخدم الكلاس element هنا قمنا بجعل العنصر الذي يمثله المتغير 
element.className = 'danger';

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير highlight-border هنا قمنا بإضافة الكلاس
element.className += 'highlight-border';

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// elementStyle في المتغير element المطبقة على العنصر الذي يمثله المتغير CSS هنا قمنا بتخزين خصائص و قيم
var elementStyle = window.getComputedStyle(element);

// element المطبقة على العنصر الذي يمثله المتغير CSS هنا قمنا بعرض بعض قيم خصائص
document.write('color = ' + elementStyle.getPropertyValue('color') + '<br>');
document.write('font-family = ' + elementStyle.getPropertyValue('font-family') + '<br>');
document.write('font-size = ' + elementStyle.getPropertyValue('font-size') + '<br>');
document.write('background = ' + elementStyle.getPropertyValue('background') + '<br>');
document.write('padding = ' + elementStyle.getPropertyValue('padding'));

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// elementStyle في المتغير element المطبقة على العنصر الذي يمثله المتغير CSS هنا قمنا بتخزين خصائص و قيم
var elementStyle = window.getComputedStyle(element);
        
// المطبقة على العنصر CSS هنا قمنا بإنشاء حلقة تعرض جميع خصائص و قيم
// ملاحظة: سيظهر لك الخصائص الإفتراضية + التي قمت أنت بإضافتها للعنصر
for (let i=0; i<elementStyle.length; i++) {
    document.write(elementStyle[i] + ': ' + elementStyle.getPropertyValue(elementStyle[i]) + '<br>');
}