عنصر JavaScript

دليل JavaScript

دليل JS DOM

مفهوم Storage في JS مفهوم Window في JavaScript

طريقة Window getComputedStyle()

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

الأسلوب المحسوب هو الأسلوب الذي سيتم استخدامه لعرض العنصر بعد تطبيق الأساليب من مصادر متعددة.

يمكن أن يشمل مصدر الأسلوب ما يلي: الصفحة الداخلية للأسلوب، الصفحة الخارجية للأسلوب، الأسلوب الموروث والأسلوب الافتراضي للمتصفح.

يمكن من خلالCSSStyleDeclarationالأساليب التي يقدمها العنصر أو استخدام أسماء خصائص CSS لإنشاء مؤشرات لتحديد قيم خصائص CSS المختلفة.

语法：

window.getComputedStyle(element, pseudoElement)

مثال

var heading = document.getElementsByTagName("h1")[0];
var x = window.getComputedStyle(heading, null).getPropertyValue("color");

اختبار راجع‹/›

浏览器兼容性

表格中的数字指定了完全支持getComputedStyle()方法的第一个浏览器版本：

方法
getComputedStyle()	11	4	11.5	5	9

参数值

参数	描述
element	要为其获取计算样式的元素
pseudoElement	（可选）一个字符串，指定要匹配的伪元素。对于真实元素，省略（或为null）。

技术细节

返回值：	一个CSSStyleDeclaration对象，包含元素的CSS声明块，当元素的样式更改时，该对象会自动更新。

更多实例

在此示例中，我们为<p>元素设置样式，然后使用getComputedStyle()检索这些样式，并将其打印到<p>的文本内容中：

مثال

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');

اختبار راجع‹/›

从元素获取所有计算出的样式：

مثال

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
for (let i = 0; i < compStyles.length; i++) {　
prop = compStyles.item(i);
txt += prop + " = " + compStyles.getPropertyValue(prop) + "<br>";
}

اختبار راجع‹/›

يمكن لـ getComputedStyle() استخراج معلومات النمط من العناصر الوهمية (مثل:: after،:: before،:firstfirst، إلخ):

مثال

var div = document.getElementsByTagName("div")[0];
var x = window.getComputedStyle(div, "first-letter").getPropertyValue("font-size");

اختبار راجع‹/›

مراجع مرتبطة

تعليمات CSS:تعليمات CSS

تعليمات CSS:مفهوم CSS Pseudo-Elements

مرجع CSS:خصائص CSS

مرجع JavaScript:مفهوم CSSStyleDeclaration

CSSStyleDeclaration:طريقة getPropertyValue()

مرجع HTML:خصائص النمط في HTML

مرجع HTML:علامة <style> في HTML

مفهوم Window في JavaScript

مفهوم Storage في JS مفهوم Window في JavaScript