Sterowanie stylem CSS poprzez DOM js

Question

Dzień dobry

Chciałbym osiągnąć taki efekt:

CSS: #plansza { font-size: 40px };

JS: haslo1 = ['0' , '1' , '2'];

document.getElementById("plansza").style.fontSize = *obecny rozmiar* - haslo1.legnth + px;

 

Mam ustalony font-size dla id plansza w CSS na sztywno w pixelach.

Chciałbym odejmować od niego tyle pikseli, ile wynosi długość tablicy haslo1.

 

W jaki sposób to zrobić? Może użyć jakiejś sztuczki? Chodzi o sterowanie wielkością wyrazu za pomocą ilości znaków w nim zawartych.

Answer 1

const element = document.getElementById('plansza');

// Pobieramy style obliczone:
const elementStyles = window.getComputedStyle(elem);

// Z obliczonych styli wyciągamy fontSize:
const elementFontSize = elementStyles.getPropertyValue("fontSize");

Metoda getComputedStyle zwraca obiekt zawierający style obliczone, czyli te po przejściu wszystkich reguł CSS, styli inline itp. (czyli jakby końcowe). Natomiast poprzez style.fontSize możesz odnosić się do styli inline które sam przypiszesz w html lub w JS.

Answer 2

Jeżeli chcesz pobrać jakiś atrybut CSS to polecam użyć jQuery:

var fontsize = $("#plansza").css("font-size");

funkcja "css" w jQuery pozwala również na zmianę styli CSS.

Tutaj przykład:

// Zapisywanie stylu do zmiennej
var fontsize = $("#div1").css("font-size");

// Zmienianie stylu
$("#div2").css("font-size", fontsize);

 

Comments

Dzięki za odpowiedź, ale wolałbym nie podpinać jQuery tylko dla tego zadania.

---

Poszukałem w Google i znalazłem coś takiego