JavaScript | Окно getComputedStyle () Метод

Опубликовано: 13 Декабря, 2021

Метод getComputedStyle () используется для получения всех вычисленных свойств CSS и значений указанного элемента .
Использование вычисленного стиля - это отображение элемента после применения стилей из нескольких источников.
Метод getComputedStyle () возвращает объект CSSStyleDeclaration.

Синтаксис:

 window.getComputedStyle (элемент, псевдоэлемент)

Параметры:

element: элемент, для которого требуется получить вычисленный стиль
pseudoElement: псевдоэлемент, который нужно получить. это необязательный параметр.

Пример: вернуть семейство шрифтов текста в div.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        HTML | DOM Window getComputedStyle() Method
    </ title >
 
    < style >
        div {
            color: white;
            text-align: justify;
        }
    </ style >
 </ head >
 
< body >
    < center >
        < p >
            < button onclick = "myFunction()" >
                Try it
            </ button >
        </ p >
        < div id = "test" style="height: 100px;
                    background-color: green;
                    font-size: 50px;
                    padding-left: 140px;
                    padding-top: 50px;">
            Geeks for Geeks
        </ div >
        < p >
          The computed font-family of text
          in the test div is:
          < span id = "demo" ></ span >
        </ p >
 
        < script >
            function myFunction() {
 
                var elem = document.getElementById("test");
                var theCSSprop =
                    window.getComputedStyle(
                        elem, null).getPropertyValue("font-family");
                document.getElementById("demo").innerHTML =
                                  theCSSprop;
            }
        </ script >
    </ center >
 </ body >
 
</ html > 

Выход:
Перед нажатием кнопки:

После нажатия на кнопку:

Поддерживаемые браузеры: Браузеры, поддерживаемые методом Window getComputedStyle () , перечислены ниже:

Google Chrome 11.0
Internet Explorer 9.0
Firefox 4.0
Opera 11.5
Safari 5

JavaScript JavaScript-Misc

JavaScript | Окно getComputedStyle () Метод

РЕКОМЕНДУЕМЫЕ СТАТЬИ