Zmiana rozmiaru czcionki fontSize

0

Witam, znalazłem kod który pobiera i zmienia rozmiar czcionki:

function test(size)
{
    var allTags=document.getElementsByTagName('*'), i=0, e;

    var size = parseInt(size,10);           

    while(e=allTags[i++])
    {

        if(e.id)
        {
            var el = document.getElementById(e.id);
            var curFont = parseInt(el.style.fontSize,10);
            el.style.fontSize = (size) + 'px';
        }
    }
}

Pierwsze pytanie dotyczy elementów dla których parametr id nie został zdefiniowany

document.getElementsByTagName('*')

<div class="header">...</div>
<div class="body" id="_">...</div>
<div class="fotter" id="_" style="font-size:12px;">...</div>

Polecenie pobiera wszystkie obiekty dla których id jest zdefiniowane, a jak pobrać te które tego nie mają?
Dalej, dla klasa "body" rozmiar czcionki zdefiniowany jest w CSS, a niestety pobierana wartość to 'NaN', jak rozwiązać dwa powyższe problemy?

0

zara zara, przecież e jest elementem - po co wyciągasz z niego id, pobierasz jeszcze raz ten sam element po id, i dopiero robisz jakieś akcje?

podaj kod js jak pobierasz rozmiar czcionki z drugiego pytania

0

Żeczywiście tyle wystarczy do pobrania samych div'ów

var allTags=document.getElementsByTagName('div'), i=0, e;

A jak pobrać rozmiar czcionki?

var curFont = parseInt(el.style.fontSize,10);
0

Musiałem sobie trochę odświeżyć wiedzę na temat javaScript, ale udało się... efekt końcowy poniżej...
Chciałem jeszcze zapytać o opcję symulacji wciśnięcia klawisza Ctrl + +, czy z poziomu JS mogę coś takiego wykonać?
Lub wykorzystać API przeglądarki chociaż z tym może być różnie...

<script type="text/javascript">
    var iOldChangeSize = 0;

    function changeFontSize(size)
    {
        var allTags=document.getElementsByTagName('div'), i=0, e;

        var iChangeSize = 0;

        switch(size)
        {
            case 1:
                iChangeSize = 2;
                break;
            case 2:
                iChangeSize = 4;
                break;
            case 3:
                iChangeSize = 8;
                break;
        }

        switch(iOldChangeSize)
        {
            case 1:
                iChangeSize += -2;
                break;
            case 2:
                iChangeSize += -4;
                break;
            case 3:
                iChangeSize += -8;
                break;
        }

        iOldChangeSize = size;

        while(e=allTags[i++])
        {
                var style = window.getComputedStyle(e, null).getPropertyValue("font-size");
                var fontSize = style.substring(0, style.indexOf('px'));

                e.style.setProperty("font-size", parseInt(fontSize, 10) + parseInt(iChangeSize, 10) + "px", null);
        }

    } 
</script>
0

Istnieje sposób, by z pomocą JS-a (i -- nawet bardziej -- CSS-a) zasymulować to, co się dzieje normalnie po wciśnięciu [CTRL]-[+]. Czyli zoomowanie strony. Sposób jest oparty na standardach i działa w każdej przeglądarce, ale jest trudny w wykonaniu.

Musisz WSZYSTKIE rozmiary na stronie zdefiniować używając jednostki em. Nie pikseli, tylko emów. Będziesz miał trochę kalkulacji. Zwykle robi się tak, że na elemencie html ustawiasz font-size na 62.5%, co się równa 10 pikselom. Na body robisz font-size: 1.0em. Potem, gdy chcesz, by pasek boczny miał np. normalnie 200px szerokości, definiujesz jego szerokość jako 20em. Rozmiary czcionek też podajesz w emach, ale rób to oszczędnie: jeśli przedefiniujesz rozmiar czcionki w jakimś elemencie np. na 1.2em, to we wszystkich elementach potomnych 1em będzie równy już nie 10 pikselom, tylko 12.

W każdym razie, potem w JavaScripcie wystarczy tylko zmienić rozmiar czcionki na body. Zmień z 1.0em na 2.0em, i już wszystko się robi 2x większe, bo rozmiary wszystkiego podawałeś w emach. A one są jednostkami (mocno) relatywnymi. 1em to jest "tyle, ile wynosi font-size w aktualnym elemencie". Zmieniając font-size na body, zmieniasz bezwzględną wartość font-size w pozostałych elementach, a co za tym idzie również wymiary tych elementów.

To technika zaawansowana i niezbyt przydatna. Podałem ją jako ciekawostkę. Ja sam zastosowałem ją na 1 lub 2 stronach, ale było to jeszcze za czasów, gdy IE6 było popularne. A IE6 nie pozwalało na skalowanie czcionek podanych w pikselach. Nie wszystkie popularne przeglądarki miały wtedy w ogóle łatwo dostępny zoom i raczej [CTRL]-[+] powiększało czcionkę, a nie robiło zoomu.

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