انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: تعديل تنسيقات CSS عبر DOM في JavaScript

Setting Units Pixels Percentages كتابة وحدات القياس النصية

عدّل تنسيقات CSS عبر شجرة DOM في JavaScript بإتقان خصائص element.style ووحدات القياس وطرق الإخفاء وقراءة القيم المحسوبة بـ getComputedStyle() ومتغيرات setProperty.
2 صفوف تعليمية
جافا سكريبت
5,854 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

من أكثر الهفوات شيوعاً كتابة رقم مجرد مثل bar.style.width = 75؛ إذ يتجاهل المتصفح الأرقام الخالية من الوحدات بصمت! أرفق دائماً وحدة القياس كنص مثل "75%" أو "24px" (باستثناء الخصائص العديمة الوحدة بطبيعتها مثل opacity).

الصف 2 كود برمجي
JavaScript 
let pct = 40;
function advanceProgress() {
  pct = pct >= 100 ? 20 : pct + 20;
  const bar = document.getElementById('prog-fill');
  bar.style.width = pct + '%';
  bar.textContent = pct + '%';
}
جرّب بنفسك

جميع فقرات هذا الدرس (تعديل تنسيقات CSS عبر DOM في JavaScript)