• 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
97 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 (190,760 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,660 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,660 p.)

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

Podobne pytania

0 głosów
4 odpowiedzi 159 wizyt
0 głosów
1 odpowiedź 53 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
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

67,158 zapytań

114,107 odpowiedzi

241,853 komentarzy

47,046 pasjonatów

Przeglądających: 275
Pasjonatów: 14 Gości: 261

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.

...