Window getComputedStyle() စက်တင်

定义和用法

getComputedStyle() 方法获取 HTML 元素的计算 CSS 属性和值。

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) + "
"; }

亲自试一试

例子 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 可选。要获取的伪元素。

返回值

类型 描述
对象 拥有元素的所有 CSS 属性和值的 CSSStyleDeclaration 对象。

ပေါ်ပေါ်ရိုးစက်() စနစ်နှင့် style အခြေအနေ၏ အခြေအနေ

ပေါ်ပေါ်ရိုးစက်() စနစ်ကို HTMLElement ရှိ style အခြေအနေကို နှိပ်တူညီပြီးရပါသည်: အခြေအနေသည် အဆင့်သတ်ထားသော အဆင့်အသုံးပြုနိုင်သော အဆင့်အသုံးပြုနိုင်သည်၊ နှင့် အဆင့်သတ်ထားသော အဆင့်အသုံးပြုနိုင်သည်၊ နှင့် အဆင့်သတ်ထားသော အဆင့်အသုံးပြုနိုင်သည်၊ နှင့် အဆင့်သတ်ထားသော အဆင့်အသုံးပြုနိုင်သည်။

浏览器支持

所有浏览器都支持 getComputedStyle()

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持