• 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,840 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 160 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
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

67,249 zapytań

114,208 odpowiedzi

242,114 komentarzy

45,648 pasjonatów

Przeglądających: 389
Pasjonatów: 20 Gości: 369

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.

...