Powiększanie czcionki i zmiana stylu strony na "żałobny"

0

Witam.
Na wielu stronach (np https://www.gdynia.pl ) są ikonki do powiększania i pomniejszania czcionki na stronie oraz zmieniania stylu strony na czarno-biały (w "żałobie").
W jaki sposób jest to zrobione? Jak to mogę zrobić u siebie na stronie?:) Są to jakieś gotowe rozwiązania?

0

Zrobiłem na szybko przykład ilustrujący, jak można zrobić mechanizm zwiększania czcionki na stronie.
Rzuć okiem i powiedz, czy rozumiesz jak to działa - https://jsfiddle.net/4kzbhy9o/

0

Tak, dziękuje. Czyli generalnie wszystkie czcionki na stronie muszą mieć określoną klasę żebym mógł je powiększać?

1

Możesz zmienić rozmiar fontu tylko na body jeśli we wszystkich pozostałych miejscach używasz relatywnych rozmiarów (rem lub procentów).

0

To zależy od tego, co chcesz osiągnąć. Czy chcesz wszystkie elementy powiększyć, czy tylko część.
Mój przykład miał na celu pokazać, jak możesz sobie pobrać określony element i go powiększyć.
To, co podesłał @czysteskarpety bardziej dotyczy całości strony. W szczególności zwróć uwagę na 2 ostatnie linki. Masz tam m.in fragment

function myFunction() {
    var arr = document.getElementsByTagName('p');
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.fontSize = "1.5em";
    }
}

Musisz się sam zastanowić, co i jak chcesz powiększać/zmniejszać. Możliwości masz pełno - możesz działać tylko na wybranych ID, możesz na klasach, możesz też na określonych tagach (jak w podanym powyżej przykładzie - na elementach <p>).

0

Dziękuję bardzo za pomoc :)
W jaki sposób "zapamiętać" że stronka ma być powiększona przy przejściach pomiędzy podstronami?

Jak osiągnąć ten efekt "żałoby"?

0

Przychodzą mi do głowy dwie rzeczy:

  1. sesje
  2. cookies
1

@lukmopy: to nie jest "efekt żałoby" a wysoki kontrast dla osób z problemami z widzeniem.

Co do zapamiętania to masz mnóstwo rozwiązań, IMHO najlepsze będzie jednak użycie LocalStorage zamiast propozycji podanych przez @cerrato.

1 użytkowników online, w tym zalogowanych: 0, gości: 1