طريقة getComputedStyle()

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

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 الدعم الدعم الدعم الدعم