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

دریافت اندازه فونت محاسبه شده اولین حرف عنصر (با استفاده از پ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 مورد نظر برای دریافت استایل محاسبه شده.

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

نوع توضیح
عنصر مجموعه‌ای از تمام ویژگی‌ها و مقادیر CSS در CSSStyleDeclaration.

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

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

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

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی
  • صفحه قبلی
  • صفحه بعدی
  • بازگشت به لایه بالاتر موضوع Window