أحدث البرامج التعليمية وتطوير الشبكة
 

JavaScript نافذة او شباك getComputedStyle() Method

<كائن النافذة

مثال

الحصول على حسابها (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>
انها محاولة لنفسك »

<كائن النافذة