مثال
الحصول على حسابها (actual showing) لون الخلفية لشعبة:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
وستكون النتيجة:
The computed background color for the test div is: rgb(173, 216, 230)
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
و getComputedStyle() يحصل على طريقة كل الفعلية (computed) خاصية CSS والقيم للعنصر المحدد.
النمط المحوسب هو اسلوب يستخدم acutally في عرض العنصر، بعد أن تم apllied ستلينغس من مصادر متعددة.
ويمكن أن تشمل مصادر نمط: ورقة داخلية النمط، أوراق الأنماط الخارجية، وأساليب الموروثة والأنماط المستعرض الافتراضي.
و getComputedStyle() الأسلوب بإرجاع كائن CSSStyleDeclaration .
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
طريقة | |||||
---|---|---|---|---|---|
getComputedStyle() | 11.0 | تسعة | 4.0 | 5 | 11.5 |
بناء الجملة
قيم معلمة معامل وصف element مطلوب. عنصر للحصول على أسلوب المحوسب ل pseudoElement اختياري. A-عنصر الزائفة للحصول على
تفاصيل تقنية
قيمة الإرجاع: كائن CSSStyleDeclaration تحتوي على كتلة إعلان CSS العنصر.
مزيد من الأمثلة
مثال
الحصول على جميع أنماط المحسوبة من عنصر:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> انها محاولة لنفسك » مثال
الحصول على حجم الخط الكمبيوتر من الحرف الأول في شعبة اختبار (باستخدام الزائفة عنصر):
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> انها محاولة لنفسك »