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