جافا سكريبت HTML DOM تغيير CSS
HTML DOM يسمح جافا سكريبت لتغيير نمط عناصر HTML.
أساليب التغيير HTML
لتغيير نمط عنصر HTML، استخدم بناء الجملة التالي:
document.getElementById(id).style.property=新样式
والمثال التالي تغيير عنصر النمط <ص>:
أمثلة
<! DOCTYPE أتش تي أم أل>
<HTML>
<رئيس>
<ميتا محارف = "UTF-8">
<عنوان> هذا البرنامج التعليمي (w3big.com) </ عنوان>
</ رئيس>
<body>
<P معرف = "P1"> مرحبا العالم ! </ P>
<P معرف = "P2"> مرحبا العالم ! </ P>
<script> document.getElementById ( "P2" ) style.color = "الأزرق" ؛. Document.getElementById ( "P2") style.fontFamily = "ارييل"، .. Document.getElementById ( "P2") style.fontSize = "أكبر"؛ </ script>
<P> النصي عن طريق تعديل الفقرتين السابقتين. </ P>
</ الجسم>
</ HTML>
محاولة »
استخدام الحدث
HTML DOM يتيح لنا تنفيذ التعليمات البرمجية عن طريق إحداث الأحداث.
على سبيل المثال، ما يلي الأحداث:
- يتم النقر عنصر.
- تحميل الصفحة.
- يتم تعديل مربع الإدخال.
- ......
في المقاطع التالية، سوف تتعلم المزيد عن المعرفة الحدث.
يتغير هذا المثال رقم نمط = "ID1" عنصر HTML، عندما يقوم المستخدم بالنقر فوق الزر:
أمثلة
<! DOCTYPE HTML>
<HTML>
<body>
<H1 معرف = "ID1"> بلدي تتجه 1 </ H1>
<نوع زر = "زر"
عند _ النقر = "document.getElementById ( 'ID1'). style.color = 'الأحمر'">
لي نقطة! </ زر>
</ الجسم>
</ HTML>
<HTML>
<body>
<H1 معرف = "ID1"> بلدي تتجه 1 </ H1>
<نوع زر = "زر"
عند _ النقر = "document.getElementById ( 'ID1'). style.color = 'الأحمر'">
لي نقطة! </ زر>
</ الجسم>
</ HTML>
محاولة »
مزيد من الأمثلة
رؤية
كيفية جعل عنصر غير مرئي. العنصر الذي تريد أن تظهر أو تختفي؟