Przykład
Pobierz komputerowej (actual showing) kolor tła 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>Wynikiem będzie:
The computed background color for the test div is: rgb(173, 216, 230) Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
getComputedStyle() metoda pobiera wszystkie rzeczywiste (computed) właściwości CSS i wartości określonego elementu.
Styl kalkulowana jest styl acutally używany w wyświetlaniu elementu, po stylizacje z wielu źródeł zostały zaaplikowana.
Źródła style mogą obejmować: wewnętrzne arkusze stylów, arkusze stylów zewnętrznych, odziedziczone style i domyślne style przeglądarki.
getComputedStyle() sposób wraca do obiektu CSSStyleDeclaration .
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11,0 | 9.0 | 4.0 | 5 | 11,5 |
Składnia
wartości parametrów Parametr Opis element Wymagany. Element, aby uzyskać styl obliczone dla pseudoElement Opcjonalny. Pseudo-element, aby uzyskać
Szczegóły techniczne
Zwracana wartość: Obiekt CSSStyleDeclaration blok zawierający deklarację CSS elementu.
Więcej przykładów
Przykład
Uzyskać wszystkie obliczone style z elementem:
<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> Spróbuj sam " Przykład
Uzyskaj rozmiar czcionki komputer pierwszej litery w div testowego (za pomocą pseudo-element):
<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> Spróbuj sam "