Łatwo jest modyfikować style elementów, ale trudno jest odczytać wartość.
JavaScript nie może odczytać żadnej właściwości stylu elementu (elem.style) pochodzącej z css (wewnętrznego / zewnętrznego), chyba że użyjesz wbudowanego wywołania metody getComputedStyle w javascript.
getComputedStyle (element [, pseudo])
Element: element do odczytu wartości.
pseudo: pseudoelement, jeśli jest wymagany, na przykład :: przed. Pusty ciąg lub brak argumentu oznacza sam element.
Wynikiem jest obiekt o właściwościach stylu, taki jak elem.style, ale teraz w odniesieniu do wszystkich klas css.
Na przykład tutaj styl nie widzi marginesu:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Zmodyfikowano więc kod javaScript, aby zawierał getComputedStyle elementu, który ma uzyskać szerokość / wysokość lub inny atrybut
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Obliczone i rozwiązane wartości
W CSS istnieją dwie koncepcje:
Obliczona wartość stylu jest wartością po zastosowaniu wszystkich reguł CSS i dziedziczeniu CSS w wyniku kaskady CSS. Może wyglądać jak wysokość: 1 em lub rozmiar czcionki: 125%.
Rozwiązana wartość stylu to ta, która ostatecznie została zastosowana do elementu. Wartości takie jak 1em lub 125% są względne. Przeglądarka przyjmuje obliczoną wartość i sprawia, że wszystkie jednostki są stałe i bezwzględne, na przykład: wysokość: 20 pikseli lub rozmiar czcionki: 16 pikseli. Dla właściwości geometrii rozstrzygnięte wartości mogą mieć zmiennoprzecinkowe, takie jak szerokość: 50,5 pikseli.
Dawno, dawno temu getComputedStyle został stworzony, aby uzyskać obliczone wartości, ale okazało się, że rozwiązane wartości są znacznie wygodniejsze i standard się zmienił.
W dzisiejszych czasach getComputedStyle faktycznie zwraca rozstrzygniętą wartość właściwości.
Proszę zanotować:
getComputedStyle wymaga pełnej nazwy właściwości
Zawsze należy pytać o dokładną właściwość, taką jak paddingLeft lub wysokość lub szerokość. W przeciwnym razie poprawny wynik nie jest gwarantowany.
Na przykład, jeśli istnieją właściwości paddingLeft / paddingTop, to co powinniśmy uzyskać dla getComputedStyle (elem) .padding? Nic, a może „wygenerowana” wartość ze znanych wypełnień? Nie ma tutaj standardowej reguły.
Istnieją inne niespójności. Na przykład niektóre przeglądarki (Chrome) pokazują 10px w poniższym dokumencie, a niektóre z nich (Firefox) - nie:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
aby uzyskać więcej informacji https://javascript.info/styles-and-classes