Forum PHP.pl > [JavaScript] Zmiana czcionki (powiększanie, pomniejszanie)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zmiana czcionki (powiększanie, pomniejszanie)

thomson89

5.04.2009, 18:14:48

Witam!

Jak zrobić pomniejszanie, powiększanie wielkości czionki, dla:

Kod

<h4>Autor</h4>
<h2>Hello</h2>
<p>TRESC, lorem ispum dollor...</p>

Gdybym miał, inny kod to bym sobie po prostu zrobił innerhtml, dla font size w jakimś divie, ale tak?? Dodatkowo jest taki wymóg, aby powiększała się czionka bazowa. Każdy z tych znaczników ma przypisaną klasę (css). Dlatego, np. dla wielkości: 10px, 14px, 8px powinna się zwiększyć +1, +1, +2.

Nie mam pomysłu jak to zrobić. Proszę o pomoc!

Pozdrawiam!

Crozin

5.04.2009, 18:26:35

Jeżeli wielkość czcionki podawałeś w emach czy procentach (co jest wskazane) to nie ma najmniejszego problemu, jedynie dla body (czy jakiegoś tam kontenera) większasz wielkość i reszta się automatycznie dostosuje. Jeżeli masz na pikselach... chyba będziesz musiał dla każdego elementu z osobna (każdego, który ma zadeklarowaną wielkość fontu)

thomson89

5.04.2009, 18:45:57

Czyli:

Kod

I dla każdego z tych elementów dać np. 50%, 100%, 30%. I wtedy za pomocą innerhtml, zmieniać??

Crozin

5.04.2009, 18:57:09

A ten FONT to co tam niby robi? I co niby chcesz tym innerHTMLem robić?

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Przykładowy dokument</title>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                var fontSize = 100;

                var resize = document.createElement("span");
                resize.appendChild(document.createTextNode("powiększ"));
                resize.addEventListener("click", function(){
                    document.body.style.fontSize = (fontSize += 30) + "%";
                }, false);

                document.body.appendChild(resize);
            }, false);
        </script>
    </head>
    <body>
        <h1>Nagłówek</h1>
        <h2>Jakiś tytuł</h2>
        <p>Treść</p>
    </body>
</html>

Tutaj masz przykład.

thomson89

5.04.2009, 19:15:55

Chciałem dać onclick(1) i zmienić innerem font size.

--EDIT--

Mogłbyś mi objaśnić skrypt?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.