يعمل CSS وJS معًا بشكل وثيق لإضافة العديد من التأثيرات الفريدة إلى صفحاتنا. من أجل تحقيق بعض التأثير الخاص، نحتاج إلى استخدام Javascript لتغيير خصائص CSS لعلامة معينة ديناميكيًا.
على سبيل المثال: عندما يمرر الماوس فوق صورة ما، نضيف حدًا للصورة، وقد يكون الكود كما يلي: ما هي السمة التي يجب أن تكون بعد النمط في JavaScript؟
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الصورة(ه) {
e.style.border="1px أحمر خالص";
}
وظيفة الصورة (ه) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
جدول مقارنة سمات نمط JavaScript
ومقارنة السمات
بناء جملة CSS (حساس لحالة الأحرف) بناء جملة JavaScript (حساس لحالة الأحرف)
الحدود الحدودية
الحدود - الحدود السفلية - القاع
الحدود-اللون السفلي borderBottomColor
borderBottomStyle
الحدود-العرض السفلي borderBottomWidth
لون الحدود borderColor
الحدود-الحدود اليسرىLeft
الحدود-اللون الأيسر borderLeftColor
الحدود ذات النمط الأيسر borderLeftStyle
الحدود-العرض الأيسر borderLeftWidth
الحدود اليمنى الحدود اليمنى
الحدود-اللون الأيمن borderRightColor
الحدود-النمط الأيمن borderRightStyle
الحدود-العرض الأيمن-الحدودRightWidth
نمط الحدود borderStyle
الحدود-الحدود-الأعلى
الحدود-اللون العلوي borderTopColor
border-top-style borderTopStyle
الحدود-أعلى-العرض borderTopWidth
عرض الحدود عرض الحدود
واضح واضح
تعويم floatStyle
هامش الهامش
الهامش - الهامش السفلي - القاع
الهامش-الهامش الأيسر
هامش-يمين هامش-يمين
هامش أعلى هامش أعلى
حشوة الحشو
الحشو - الحشو السفلي
الحشو-الحشو الأيسر
الحشو-الحشو الأيمن
الحشو العلوي الحشو العلوي
تسمية اللون والخلفية ومقارنة السمات
بناء جملة CSS (حساس لحالة الأحرف) بناء جملة JavaScript (حساس لحالة الأحرف)
خلفية الخلفية
الخلفية - المرفقات الخلفية المرفقة
لون الخلفية - لون الخلفية
صورة الخلفية صورة الخلفية
موقف الخلفية الخلفية الموقف
تكرار الخلفية الخلفية تكرار
لون اللون
علامات النمط ومقارنة السمات
بناء جملة CSS (حساس لحالة الأحرف) بناء جملة JavaScript (حساس لحالة الأحرف)
عرض العرض
قائمة نمط القائمة listStyleType
قائمة نمط الصورة listStyleImage
قائمة نمط الموقف listStylePosition
نمط القائمة listStyle
مسافة بيضاء مسافة بيضاء
تسمية نمط النص ومقارنة السمات
بناء جملة CSS (حساس لحالة الأحرف) بناء جملة JavaScript (حساس لحالة الأحرف)
الخط الخط
عائلة الخط FontFamily
حجم الخط حجم الخط
نمط الخط FontStyle
الخط المتغير FontVariant
وزن الخط وزن الخط
تسمية النص ومقارنة السمات
بناء جملة CSS (حساس لحالة الأحرف) بناء جملة JavaScript (حساس لحالة الأحرف)
تباعد الحروف letterSpacing
خط فاصل lineBreak
ارتفاع الخط خط الارتفاع
محاذاة النص textAlign
زخرفة النص textDecoration
مسافة بادئة للنص مسافة بادئة للنص
ضبط النص textJustify
تحويل النص textTransform
محاذاة عمودية محاذاة عمودية