JavaScript HTML DOM - تغيير CSS
يسمح HTML DOM لجافا سكريبت بتغيير نمط عناصر HTML.
تغيير نمط HTML
لتغيير نمط عنصر HTML ، استخدم بناء الجملة التالي:
document.getElementById(id).style.property = new style
يغير المثال التالي نمط <p>العنصر:
مثال
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
باستخدام الأحداث
يتيح لك HTML DOM تنفيذ التعليمات البرمجية عند وقوع حدث ما.
يتم إنشاء الأحداث بواسطة المتصفح عند حدوث "أشياء" لعناصر HTML:
- تم النقر فوق عنصر
- تم تحميل الصفحة
- تم تغيير حقول الإدخال
سوف تتعلم المزيد عن الأحداث في الفصل التالي من هذا البرنامج التعليمي.
يغير هذا المثال نمط عنصر HTML id="id1"عندما ينقر المستخدم على زر:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
مزيد من الأمثلة
كيفية جعل عنصر غير مرئي. هل تريد إظهار العنصر أم لا؟
مرجع كائن نمط HTML DOM
لجميع خصائص نمط HTML DOM ، انظر إلى مرجع كائن نمط HTML DOM الكامل الخاص بنا .