مетод Window 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

دسترسی به اندازه استایل محاسبه شده اولین حرف عنصر (با استفاده از پseudoElement):

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

آزمایش کنید

نحوه استفاده

window.getComputedStyle(element, pseudoElement)

پارامترها

پارامترها توضیح
element ضروری. عنصری که می‌خواهید استایل محاسبه شده آن را دریافت کنید.
pseudoElement اختیاری. پseudoElement مورد نظری که می‌خواهید به آن دسترسی پیدا کنید.

مقدار بازگشتی

نوع توضیح
شیء یک شیء CSSStyleDeclaration که شامل تمام ویژگی‌ها و مقادیر CSS عنصر است.

تفاوت بین روش getComputedStyle() و ویژگی style

مقایسه روش getComputedStyle() با ویژگی style HTMLElement: این ویژگی تنها اجازه دسترسی به استایل‌های درون‌محلی عنصر را می‌دهد، می‌توانید از هر واحدی که مشخص می‌کنید استفاده کنید و همچنین، هیچ اطلاعاتی در مورد استایل‌های جدول استایل‌های اعمال شده به عنصر ارائه نمی‌دهد.

پشتیبانی مرورگرها

همه مرورگرها از آن پشتیبانی می‌کنند getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی