• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sterowanie stylem CSS poprzez DOM js

0 głosów
94 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript, jQuery, AJAX przez bulit000 Początkujący (450 p.)
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.

2 odpowiedzi

+1 głos
odpowiedź 27 sierpnia 2018 przez Tomek Sochacki Mędrzec (188,800 p.)
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.

0 głosów
odpowiedź 27 sierpnia 2018 przez 1234 Mądrala (5,200 p.)

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);

 

2
komentarz 27 sierpnia 2018 przez bulit000 Początkujący (450 p.)
Dzięki za odpowiedź, ale wolałbym nie podpinać jQuery tylko dla tego zadania.
komentarz 27 sierpnia 2018 przez 1234 Mądrala (5,200 p.)

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

Podobne pytania

0 głosów
4 odpowiedzi 153 wizyt
0 głosów
1 odpowiedź 52 wizyt
pytanie zadane 6 czerwca w HTML i CSS przez Rozukee Początkujący (300 p.)
0 głosów
1 odpowiedź 47 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

66,495 zapytań

113,266 odpowiedzi

239,870 komentarzy

46,633 pasjonatów

Przeglądających: 272
Pasjonatów: 8 Gości: 264

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...