Window getComputedStyle() మాదిరి

定义和用法

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

getComputedStyle() 方法返回 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");

నేను ప్రయత్నించాను

విధానం

విండో గెట్ కాల్క్యులేటెడ్ స్టైల్(element, pseudoElement)

పారామీటర్స్

పారామీటర్స్ వివరణ
element అవసరం. ఎలాంటి సైనా గెట్ కాల్క్యులేటెడ్ స్టైల్ పొందాలి
pseudoElement ఎంపికంగా. పొందాలి సైనా ప్రొత్త సైనా ఉపాంతం

వాటి వాటి సమాధానం

రకం వివరణ
ఆబ్జెక్ట్ అన్ని సిఎస్ఎస్ అట్రిబ్యూట్లు మరియు విలువలను కలిగివున్న సిఎస్ఎస్ డెక్లరేషన్ ఆబ్జెక్ట్

గెట్ కాల్క్యులేటెడ్ మెథడ్ మరియు స్టైల్ అట్రిబ్యూట్ మధ్య వ్యత్యాసం

గెట్ కాల్క్యులేటెడ్ మెథడ్ ను హెల్లెంట్ స్టైల్ అట్రిబ్యూట్ను పోల్చండి: ఆఖరిది మాత్రమే వైవిధ్యాలను ప్రత్యక్షంగా అనుసరించే స్టైల్ను అనుమతిస్తుంది, మరియు మీరు కేటాయించిన ఏ యూనిట్లును కూడా ఉపయోగించవచ్చు, కానీ ఎలాంటి స్టైల్ షేర్స్ ను మీరుకు చెప్పలేదు.

浏览器支持

所有浏览器都支持 getComputedStyle()：

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