تعديل تصميم العناصر

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

الكائن document يوفر العديد من الطرق التي يمكن من خلالها تعديل تصميم العناصر، سواء بتمرير خصائص CSS بشكل مباشر لها أو من خلال إعطاء العناصر كلاسات CSS فيها خصائص التصميم التي نريد تطبيقها عليها.

في هذا الدرس ستتعلم كل الطرق التي يمكنك من خلالها تعديل تصميم العناصر بواسطة جافاسكربت.

تعديل تصميم العنصر بشكل مباشر

يمكنك استخدام الخاصية style.propertyName لإعطاء العنصر أي خاصية CSS مع القيمة التي تريد إضافتها له بشكل مباشر.
مكان الكلمة propertyName نمرر إسم الخاصية التي نريد إضافتها للعنصر بأسلوب Camel Case.

كتابة أسماء خصائص CSS بأسلوب Camel Case يكون بإزالة أي رمز - موجود في الإسم و بدء الكلمة الموجودة بعده بحرف كبير على النحو التالي:

display نكتبها style.display
margin-top نكتبها style.marginTop

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo و من بعدها قمنا بتغيير بعض خصائصه.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
<body>
    <h1>JS Inline Style</h1>
    <p>You can use the "style" property to add css properties to the element.</p>
    <p id="demo">My style is changed.</p>

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

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

الأسلوب السابق، يمرر خصائص CSS بشكل مباشر للعنصر كما يلي و يمكنك رؤية هذا الأمر على الحاسوب إذا قمت بالإقتراب من العنصر ثم نقرت بزر الفأرة الأيمن و اخترت Inspect أو Inspect Element.

<p id="demo" style="color: blue; font-family: Arial; font-weight: bold;">My style is changed.</p>

إضافة / حذف كلاس CSS من العنصر

يمكنك استخدام الخاصية classList و من ثم استدعاء إحدى التالية منها للتعامل مع كلاسات العنصر:

classList.add() لإضافة كلاس جديد في العنصر.
classList.remove() لحذف كلاس موجود في العنصر.
classList.toggle() لإضافة كلاس في العنصر إن لم يكن موجوداً فيه و لحذفه منه إن كان كذلك.

بغض النظر عن الدالة التي نستخدمها منهم، فإنه يجب تمرير إسم الكلاس كنص لهم.

الدالة classList.add() و الدالة classList.remove() يمكنك تمرير إسم أكثر من كلاس لهم في ذات الوقت و عندها سيتم إضافة أو حذف أكثر من كلاس من العنصر في ذات الوقت.

أمثلة حول إضافة كلاس

في المثال التالي قمنا بإضافة الكلاس highlight للعنصر الذي يملك id يساوي demo.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Add CSS Class</h1>
    <p>You can use the "classList.add()" method to add a css class to the element.</p>
    <p id="demo">I am using the highlight class.</p>

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

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

في المثال التالي قمنا بإضافة الكلاس highlight و الكلاس highlight-border للعنصر الذي يملك id يساوي demo.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}

.highlight-border {
    border-left: 3px solid cornflowerblue;
}
        </style>
    </head>
<body>
    <h1>JS Add Multiple CSS Classes</h1>
    <p>You can use the "classList.add()" method to add multiple css classes to the element.</p>
    <p id="demo">I am using the highlight and the highlight-border classes.</p>

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

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

أمثلة حول إزالة كلاس

في المثال التالي قمنا بإزالة الكلاس highlight من العنصر الذي يملك id يساوي demo.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Remove CSS Class</h1>
    <p>You can use the "classList.remove()" method to remove a css class from the element.</p>
    <p id="demo" class="highlight">I don't use the highlight class anymore.</p>

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

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

في المثال التالي قمنا بإزالة الكلاس highlight و الكلاس highlight-border من العنصر الذي يملك id يساوي demo.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}

.highlight-border {
    border-left: 3px solid cornflowerblue;
}
        </style>
    </head>
<body>
    <h1>JS Remove Multiple CSS Classes</h1>
    <p>You can use the "classList.remove()" method to remove multiple css classes from the element.</p>
    <p id="demo" class="highlight 'highlight-border">I don't use the highlight and the highlight-border classes anymore.</p>

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

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

مثال حول تناوب الكلاس

في المثال التالي قمنا بجعل العنصر الذي يملك id يساوي demo يتناوب على استخدم الكلاس highlight، و هذا يعني أنه:

في حال كان العنصر بالأساس يستخدم الكلاس فإنه سيتم إزالته منه.
في حال كان العنصر بالأساس لا يستخدم الكلاس فإنه سيتم إضافته له.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Toggle CSS Class</h1>
    <p>You can use the "classList.toggle()" method to toogle the css class on the element.</p>
    <p id="demo">Initially I didn't use the highlight class, but I am using it now.</p>

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

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

معرفة ما إن كان العنصر يستخدم كلاس ما

يمكنك استخدام الدالة classList.contains() لمعرفة ما إن كان العنصر يستخدم كلاس محدد أم لا.
بين أقواس الدالة يجب تمرير إسم الكلاس المراد التأكد من وجوده أو عدمه كنص.
الدالة ترجع true إذا كان العنصر يحتوي على الكلاس، و ترجع false إن لم يكن كذلك.

في المثال التالي قمنا بفحص العنصر الذي يملك id يساوي demo لمعرفة ما إن كان يستخدم الكلاس highlight أم لا.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Check If Element Has Class</h1>
    <p>You can use the "classList.contains()" method to check whether the element has a custom class or not.</p>
    <p id="demo" class="highlight">I am using the highlight class.</p>

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

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

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

تبديل قيمة class بقيمة أخرى

يمكنك استخدام الخاصية className لتغيير قيمة الخاصية class للعنصر كما هي أو للإضافة عليها.

ننصح باستخدام الدالتين classList.add() و classList.remove() لإضافة و حذف الكلاسات من العنصر بدلاً من استخدام الخاصية className لأن التعامل معهما أكثر سهولة و يجنبك حذف كلاسات من العنصر عن طريق الخطأ.

في المثال التالي قمنا بتبديل جميع الكلاسات التي يستخدمها العنصر الذي يملك id يساوي demo بالكلاس danger.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}

.danger {
    background: lightpink;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Set Class Value For Element</h1>
    <p>You can use the "classList.className" property to set the class value for the element.</p>
    <p id="demo" class="highlight">the highlight class is removed from me. Now, I am using the danger class.</p>

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

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

في المثال التالي قمنا بإضافة الكلاس highlight-border للعنصر الذي يملك id يساوي demo.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}

.highlight-border {
    border-left: 3px solid cornflowerblue;
}
        </style>
    </head>
<body>
    <h1>JS Set Class Value For Element</h1>
    <p>You can use the "classList.className" property to set the class value for the element.</p>
    <p><b>Note:</b> We append the 'highlight-border' class at the end of the 'highlight' name, that's why we need a empty space between them.</p>
    <p id="demo" class="highlight">I am using the highlight and the highlight-border classes.</p>

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

        // element للعنصر الذي يمثله المتغير highlight-border هنا قمنا بإضافة الكلاس
        // 'highlight' يجب وضع مسافة فارغة قبل إسم الكلاس ' ' كما فعلنا حتى لا يلتصق بالكلاس
        element.className += ' highlight-border';
        
        // ----------------- ملاحظة مهمة -----------------
        // highlighhighligh-border لو لم نضع مسافة فارغة لكانت أسماء الكلاسات إلتصقت ببعضها هكذا
        // و بالطبع هذا الأمر كان سيسبب مشكلة في التصميم لأنه لا يوجد كلاس بهذا الإسم
    </script>
</body>
</html>

معرفة خصائص التصميم التي إعتمدها المتصفح

الكائن window يتيح لك معرفة كافة خصائص القيم المطبقة على العنصر.

يمكنك استدعاء الدالة window.getComputedStyle() للحصول على كائن فيه جميع الخصائص CSS المطبقة على العنصر و من ثم يمكنك المرور عليهم واحدة تلو الأخرى بواسطة حلقة، أو تستطيع استخدام الدالة getPropertyValue() لمعرفة قيمة خصائص محددة مطبقة على العنصر.

في المثال التالي قمنا بعرض بعض خصائص و قيم CSS المطبقة على العنصر الذي يملك id يساوي demo.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Get Element Computed Style</h1>
    <p>You can use the "window.getComputedStyle()" method to get an 
        object contains all the computed properties for the element.</p>
    <p id="demo" class="highlight">I am using the highlight class.</p>

    <script>
        // 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'));
    </script>
</body>
</html>

في المثال التالي قمنا باستخدام حلقة لعرض جميع خصائص و قيم CSS المطبقة على العنصر الذي يملك id يساوي demo.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Get All CSS Properties Applied On The Element</h1>
    <p>You can use the "window.getComputedStyle()" method to get an 
        object contains all the computed properties for the element.</p>
    <p id="demo" class="highlight">I am using the highlight class.</p>

    <script>
        // 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>');
        }
    </script>
</body>
</html>

آخر الأخبار

CSS / نظرة عامة

CSS / الألوان (Colors)

HTML / الرموز المطبعية

HTML / الروابط

إنشاء موقعك الإلكتروني أنيق ومخصص للجيم والرياضه الحديد HTML وCSS وJavaScript

HTML / تنسيق النصوص

JS / تعديل تصميم العناصر

تعديل تصميم العناصر

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

تعديل تصميم العنصر بشكل مباشر

مثال

إضافة / حذف كلاس CSS من العنصر

أمثلة حول إضافة كلاس

المثال الأول

المثال الثاني

أمثلة حول إزالة كلاس

المثال الأول

المثال الثاني

مثال حول تناوب الكلاس

مثال

معرفة ما إن كان العنصر يستخدم كلاس ما

مثال

تبديل قيمة class بقيمة أخرى

المثال الأول

المثال الثاني

معرفة خصائص التصميم التي إعتمدها المتصفح

المثال الأول

المثال الثاني

إرسال تعليق

نموذج الاتصال