Pobieranie wartości CSS w JS

Question

Witam.

W jaki sposób mogę pobrac aktualną wartość np. szerokości obiektu z plikuc CSS do zmiennej Javascript?

Próbowałem to robić w ten sposób: 

let zmienna=document.createElement('div').style.width;

Oczywiście mam ustawioną wartość width:100px w stylach, jednak gdy próbuje odnieść się do tej zmiennej zostaje pokazany tylko pusty string "". 

Z góry dziękuję za pomoc.

Comments

createElement?

Answer 1

https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height

Comments

No dobrze a co z pobraniem innej zawartości np. koloru?

const color = document.querySelector('div').style.color;
console.log(color)

color jest zadeklarowany w stylach dla diva, a mimo to wciąż zmienna color zawier pusty string

---

https://stackoverflow.com/questions/34383545/how-to-get-color-of-div-with-javascript

---

Nie jestem ekspertem od JS ale wydaje mi się, że źle korzystasz z funckji querySelector()

Ja bym w tym przypadku uzyl getElementByID aby miec pewnosc ze zawsze to bedzie ten sam element.

https://www.lukaszbacik.pl/blog-p60/porownanie-funkcji-queryselector-getelementbyid-i-getelementsbyclassname.html

---

Użyłem takiego czegoś, i działa jak należy, dziękuję wszystkim za pomoc

const style = getComputedStyle(div);
const kolor = style.color;

 

---

Ja bym w tym przypadku uzyl getElementByID aby miec pewnosc ze zawsze to bedzie ten sam element. 

querySelector też zwróci ten sam element. Ogólnie podlinkowany artykuł jest słaby i pełen nieścisłości:

Struktura dokumentu przeszukiwana jest metodą przejścia pre-order. Oznacza to szukanie hierarchiczne przechodząc kolejno po kodzie. 

To prawie nic nie wyjaśnia. Skoro mamy strukturę dokumentu, to czemu nagle pojawia się kod? A wystarczyło napisać "zostanie zwrócony pierwszy element DOM, który pasuje do selektora" lub stwierdzić, że działa to podobnie do selektorów CSS, ale zwraca zawsze tylko pierwszy pasujący element.

W przypadku braku elementów pasujących do wzorca kompilator zwróci null. 

Kompilator w JS to sprawa dość skomplikowana, ale prawdopodobnie nie zostałby użyty do przemielenia tego kodu (np. w V8 mógłby tu zadziałać interpreter). Pomijam fakt, że kompilator działa w fazie kompilacji, a pobieranie elementów zachodzi w fazie runtime'u.

Niestety jest to metoda najmniej efektywna i zajmuje najwięcej czasu 

Nom, w porównaniu do reszty zwraca element najczęściej w 0ms zamiast w 0ms ;) Różnice są widoczne dopiero przy pobieraniu dużej liczby elementów w dużych dokumentach. W reszcie przypadków różnice są pomijalne. Zresztą przeglądarka na pewno tak czy inaczej optymalizuje to pod spodem i całkiem możliwe, że querySelector dla wyszukiwania po [id] posługuje się tym samym sposobem co getElementById.

O wiele ciekawiej jest przy porównaniu querySelectorAll z np. getElementsByClassName, bo tam różnica wydajności jest bardziej widoczna (chociaż wciąż pomijalna w większości wypadków), ale też i powód jest ważny. querySelectorAll zwraca zamrożoną kolekcję, tzn. zwraca tylko te elementy, które spełniały warunek w chwili odpalenia tej metody. Tak robi też m.in. jQuery. Z kolei getElementsByClassName zwraca żywą kolekcję, która przy pobieraniu z niej kolejnego elementu sprawdza, czy na pewno w dokumencie nie pojawił się nowy element spełniający warunek. Tym sposobem, jeśli dodawalibyśmy elementy w pętli, łatwo stworzyć niekończącą się pętlę → https://jsfiddle.net/z6o0jd1s/

Pomijam przy tym, że używanie tylko querySelector/querySelectorAll pozwala ujednolicić kod i stosować wszędzie po prostu selektory CSS. A to jest często o wiele ważniejsze niż zysk w postaci zaoszczędzonej 1ms na przeszukiwaniu DOM.

Answer 2

Rozumiem, że chcesz stworzyć diva, i nadać mu klasę, a w stylach css masz zadeklarowany już styl dla nowo stworzonego diva.

Więc ja bym to zrobił tak:

var nowyDiv = document.createElement('div');
nowyDiv.className = 'nazwa-klasy';
document.body.appendChild(nowyDiv);
var divWidth = window.getComputedStyle(nowyDiv).width;
console.log(divWidth)