كيفية تصميم عناصر DOM باستخدام JavaScript

الطرق التي يمكنك من خلالها تطبيق النمط على عناصر الصفحة ديناميكيًا باستخدام JavaScript عادي

قد تحتاج إلى تطبيق خصائص CSS ديناميكيًا على عناصر DOM.

ما هي واجهات برمجة التطبيقات التي يعرض المتصفح للقيام بذلك؟

أولاً ، تتمثل إحدى أنظف الطرق في إضافة فئات أو إزالتها من عنصر ، واستخدام نمط الفئات في CSS الخاص بك.

const element = document.querySelector('#my-element')

يمكنك استعمال الclassListخاصية عنصر وadd()وremove()أساليب:

element.classList.add('myclass')
element.classList.remove('myclass')

يمكنك أيضًا تغيير كل خاصية CSS لعنصر بشكل مباشر باستخدامstyleالخاصية ، التي تشير إلى العنصرالأنماط المضمنة.

على سبيل المثال يمكنك تغيير لون عنصر باستخدام

element.style.color = '#fff'

يمكنك تغيير الحدود:

element.style.border = '1px solid black'

رأيتcolorوborder. يمكنك تغيير جميع خصائص CSS ، باستخدام camelCase بدلاً من الشرطات عندما يحتوي اسم خاصية CSS عليها.

جدول الترجمة مدرج بشكل ملائم فيهذه الصفحة MDN.


المزيد من دروس js: