пример
Получить вычисленный (actual showing) цвет фона DIV:
<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 | 9,0 | 4,0 | 5 | 11,5 |
Синтаксис
Значения параметров параметр Описание element Необходимые. Элемент, чтобы получить вычисленный стиль pseudoElement Необязательный. Псевдо-элемент, чтобы получить
Технические подробности
Возвращаемое значение: Объект, содержащий 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 (используя псевдо-элемент):
<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> Попробуй сам "