مетод getComputedStyle()

  • الصفحة السابقة
  • الصفحة التالية
  • العودة إلى الطبقة السابقة موضوع Window

التعريف والاستخدام

getComputedStyle() الطريقة تحصل على خصائص CSS المحسوبة والقيم لعدة عناصر HTML.

getComputedStyle() الطريقة تعود CSSStyleDeclaration.

النمط المحسوب

النمط المحسوب يشير إلى النمط المستخدم على العنصر بعد تطبيق جميع مصادر النمط.

مصادر النمط: النمط الخارجي والنمط الداخلي، النمط المتولد عن الوراثة والنمط الافتراضي للمستعرض.

انظر أيضًا:

مفهوم CSSStyleDeclaration

مثال

مثال 1

الحصول على اللون المحسوب للخلفية للعنصر:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

جربها بنفسك

مثال 2

الحصول على جميع الأنماط المحسوبة للعنصر:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x);
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

جربها بنفسك

مثال 3

الحصول على حجم الخط المحسوب للخط الأول (استخدام العنصر الظاهري):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter");
let size = cssObj.getPropertyValue("font-size");

جربها بنفسك

النص

window.getComputedStyle(element, pseudoElement)

المتغيرات

المتغيرات وصف
element مجبر. العنصر الذي يجب الحصول على النمط المحدد.
pseudoElement اختياري. اللازم للحصول على العنصر الظاهري.

النتيجة

نوع وصف
المعادلة مثل CSSStyleDeclaration الذي يحتوي على جميع خصائص CSS وقيمها.

مقارنة طريقة getComputedStyle() مع خاصية style

مقارنة طريقة getComputedStyle() مع خصائص style للـ HTMLElement: تسمح الخصائص فقط بالوصول إلى النمط المكتوب بخط يدوي، يمكن استخدام أي وحدة تقاس بها، بالإضافة إلى ذلك، لا يمكنها إخبارك بأي معلومات حول النمط الذي تم تطبيقه على جدول الأنماط للعنصر.

دعم المتصفحات

جميع المتصفحات تدعمها getComputedStyle()الخط الفاصل:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم
  • الصفحة السابقة
  • الصفحة التالية
  • العودة إلى الطبقة السابقة موضوع Window