تعديل تصميم العناصر في لغة JavaScript

يا هلا بالشباب! اليوم بنتعلم كيف نعدل تصميم عناصر صفحتنا باستخدام جافاسكريبت. الموضوع سهل ومهم جداً عشان تخلي صفحتك تتفاعل مع المستخدم.

1. كيف نوصل للعنصر اللي بنعدله؟

قبل لا نعدل أي شي، لازم نوصل للعنصر هذا. فيه طرق كثيرة، أشهرها:

• document.getElementById('id-العنصر'): إذا عندك ID فريد للعنصر.
• document.querySelector('.class-العنصر') أو document.querySelector('tag-العنصر'): لاختيار أول عنصر يطابق المحدد (CSS Selector).
• document.querySelectorAll('.class-العنصر'): يرجع لك كل العناصر اللي تطابق المحدد.

مثال سريع:

const myDiv = document.getElementById('mySuperDiv');
const firstParagraph = document.querySelector('p');
const allButtons = document.querySelectorAll('button');

2. استخدام خاصية element.style

هذي أسهل وأكثر طريقة مباشرة لتغيير خاصية CSS واحدة. كل خصائص CSS تكون موجودة كـ properties داخل كائن style هذا، بس لازم تحولها من kebab-case إلى camelCase.

مثلاً، background-color تصير backgroundColor، و font-size تصير fontSize.

const myBox = document.getElementById('myBox');

// نغير لون الخلفية
myBox.style.backgroundColor = 'lightblue';

// نغير لون الخط
myBox.style.color = '#333';

// نغير حجم الخط
myBox.style.fontSize = '20px';

// نضيف Border
myBox.style.border = '2px solid navy';

ملاحظة مهمة: استخدام element.style يضيف الـ CSS كـ inline style للعنصر مباشرة في HTML (يعني داخل style="..."). هذي الطريقة ممتازة للتغييرات الصغيرة والمباشرة، لكنها ممكن تصير فوضوية لو عندك تغييرات كثيرة ومعقدة.

3. استخدام خاصية element.classList (الطريقة الأفضل!)

هذي الطريقة هي الأفضل والأكثر احترافية لتعديل التصميم، خصوصاً لما يكون عندك مجموعة من التغييرات. بدال ما تغير كل خاصية CSS لحالها، تسوي كلاسات (CSS Classes) في ملف الـ CSS حقك، وتستخدم جافاسكريبت عشان تضيف أو تحذف أو تبدل هذي الكلاسات للعنصر.

الـ classList يعطيك دوال مفيدة:

• add('اسم-الكلاس'): يضيف كلاس للعنصر.
• remove('اسم-الكلاس'): يحذف كلاس من العنصر.
• toggle('اسم-الكلاس'): إذا الكلاس موجود يحذفه، وإذا مو موجود يضيفه. مفيد جداً للأزرار اللي تشغل وتطفي خاصية معينة.
• contains('اسم-الكلاس'): يتحقق إذا الكلاس موجود ويرجع true أو false.

مثال:

/* في ملف style.css */
.highlight {
    background-color: yellow;
    border: 2px solid orange;
    padding: 10px;
}

.hidden {
    display: none;
}

.active-button {
    background-color: green;
    color: white;
}

// في ملف script.js
const myButton = document.getElementById('myButton');
const myText = document.getElementById('myText');

// نضيف كلاس 'highlight' للنص
myText.classList.add('highlight');

// نحذف كلاس 'hidden' من النص (لو كان موجود)
myText.classList.remove('hidden');

// زر تبديل (Toggle)
myButton.addEventListener('click', () => {
    myButton.classList.toggle('active-button');
    // ممكن نغير لون النص بناءً على حالة الزر
    if (myButton.classList.contains('active-button')) {
        myText.style.color = 'green';
    } else {
        myText.style.color = 'black';
    }
});

نصيحة ذهبية: حاول قدر الإمكان تستخدم classList بدال element.style لما تكون التغييرات التصميمية كبيرة أو متكررة. هذا يخلي الكود حقك أنظف، أسهل في الصيانة، ويفصل بين منطق الجافاسكريبت وتصميم الـ CSS.

4. استخدام element.setAttribute('style', '...')

هذي الطريقة ممكن تستخدمها عشان تحط مجموعة كاملة من الـ inline styles كـ string واحد. مفيدة لو بتعدل ستايل كامل مرة وحدة أو بتشيله تماماً. لكنها ممكن تمسح أي ستايلات سابقة كانت موجودة كـ inline style.

const anotherDiv = document.getElementById('anotherDiv');

// نحط ستايل كامل
anotherDiv.setAttribute('style', 'background-color: #eee; padding: 15px; border-radius: 5px;');

// عشان تشيل كل الـ inline styles اللي فيه:
// anotherDiv.removeAttribute('style');

خلاصة

شفنا كيف نقدر نتحكم بتصميم العناصر في جافاسكريبت. عندك element.style للتعديلات البسيطة والمباشرة، و element.classList وهي الطريقة الاحترافية والأفضل لإدارة التصميم عن طريق الكلاسات. استخدم الطريقة اللي تناسب احتياجك، لكن دائماً فكر في classList أولاً.

يلا طبقوا اللي تعلمتوه وخلوا صفحاتكم أحلى!

← السابقالفهرس