الحصول على قيم خصائص CSS لعناصر HTML في JavaScript

في تطوير الويب، يمكن أن يؤدي التعامل مع خصائص CSS ديناميكيًا إلى تحسين تجربة المستخدم والواجهة. باستخدام JavaScript، يكون الوصول إلى هذه الخصائص أمرًا سهلاً.

في السيناريو الخاص بك، يتم ربط ملف CSS بصفحة HTML، وتحتاج إلى استرداد خاصية معينة (على سبيل المثال، اللون) لقسم باسم الفئة " تَخطِيط." فيما يلي كيفية تحقيق ذلك باستخدام JavaScript:

الخيار 1: تحليل أوراق أنماط المستند (غير مستحسن)

الشرح:
تتضمن هذه الطريقة التكرار يدويًا عبر المستند كائن .styleSheets وتحليل محتوياته للبحث عن الخاصية المطلوبة. ومع ذلك، لا ينصح بهذا الأسلوب لأنه يمكن أن يصبح غير عملي، خاصة بالنسبة لملفات CSS المعقدة أو عندما تحتاج إلى استرداد خصائص لعناصر متعددة.

الخيار 2: محاكاة العنصر واستخدام النمط المحسوب (مفضل)

شرح:
هذه الطريقة أكثر كفاءة وتوفر نتائج دقيقة. يتضمن إنشاء عنصر بنفس اسم فئة العنصر الهدف ثم الوصول إلى النمط المحسوب للعنصر الذي تم إنشاؤه. يمثل النمط المحسوب النمط الفعلي المطبق على العنصر، بما في ذلك الأنماط الموروثة وأي تعديلات يتم إجراؤها من خلال أوراق أنماط المستخدم أو جافا سكريبت. getStyleProp(elem,prop) { إذا (window.getComputedStyle) { return window.getComputedStyle(elem, null).getPropertyValue(prop); } وإلا إذا (elem.currentStyle) { إرجاع elem.currentStyle[prop]; // التوافق مع آي إي } } نافذة.onload = وظيفة () { var d = document.createElement("div"); // إنشاء عنصر div d.className = "layout"; // قم بتعيين اسم الفئة تنبيه(getStyleProp(d, "color")); // استرجاع خاصية "اللون". };

اعتبارات الأنماط غير المضمنةإذا كنت تريد استرداد خصائص النمط الموروثة بدون تعريفات الأنماط المضمنة، فيمكنك إزالة الأنماط المضمنة مؤقتًا ثم استرداد القيم الموروثة.

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

وظيفة getNonInlineStyle(elem,prop) { var style = elem.cssText; // تخزين النمط المضمن مؤقتًا elem.cssText = ""; // إزالة الأنماط المضمنة var inheritedPropValue = getStyleProp(elem,prop); // استرداد القيمة الموروثة elem.cssText = style; // استعادة النمط المضمن إرجاع inheritedPropValue;