نافذة getComputedStyle ()
مثال
احصل على لون الخلفية المحسوب لعنصر ما:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
المزيد من الأمثلة أدناه.
التعريف والاستخدام
تحصل getComputedStyle()
الطريقة على خصائص وقيم CSS المحسوبة لعنصر HTML.
تقوم getComputedStyle()
الطريقة بإرجاع ملف
CSSStyleDeclaration object
.
النمط المحسوب
النمط المحسوب هو النمط المستخدم في العنصر بعد تطبيق جميع مصادر التصميم.
مصادر الأنماط: أوراق الأنماط الخارجية والداخلية والأنماط الموروثة والأنماط الافتراضية للمتصفح.
أنظر أيضا:
بناء الجملة
window.getComputedStyle(element, pseudoElement)
المعلمات
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
قيمة الإرجاع
نوع | وصف |
شيء | كائن CSSStyleDeclusion مع جميع خصائص وقيم CSS للعنصر. |
مزيد من الأمثلة
احصل على جميع الأنماط المحسوبة من عنصر:
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>";
}
احصل على حجم الخط المحسوب للحرف الأول في عنصر (باستخدام العنصر الزائف):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
دعم المتصفح
getComputedStyle()
مدعوم في جميع المتصفحات:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |