Aumentar/Diminuir fonte

access-font.js

/* 
*   AUMENTAR/DIMINUIR font 
*   ----------------------
*   by Marcker || @marcker || [email protected]        
*   MIT License;
*   ----------------------
*
*  Uso:
*
*  HTML
*  =====
*  Declare uma classe comum à todos os elementos que deseja 
*  utilizar o recurso de aumentar/diminuir o tamanho da fonte.
*
*  Obs: O tamanho dos elementos devem ser uniformes (por exemplo: tags <p> 
*       que possuam o tamanho original).
*  
*  Se observar, notará que o nome da classe que eu utilizei foi 'acessivel',
*  porém, você poderá optar por outros nomes caso queira. Para tanto, 
*  simplesmente substitua o nome 'acessivel' pelo nome que deseja.     
*
*  Você terá que criar dois elementos para controlar, sendo um para aumentar (+A) e outro
*  para diminuir (-A). Estes poderão ser qualquer elemento HTML "clicável".
*  
*  Neste exemplo, construi dois botões (id='plus' e id='less') - aumentar/diminuir
*  respectivamente.
*
*  access-font.js
*  ===============
*  Link este script em sua página HTML e ele fará o trabalho de aumentar/diminuir
*  os tamanhos das fontes "setadas" com a classe escolhida.
*
*  Ele foi testado no IE6,7,8 e outros navegadores (Windows e Linux).
*
*  Você pode querer capturar o evento 'onclick' dos elementos "clicáveis"; e se
*  o fizer você deve chamar o método Acessibilidade.aumentar_texto() para aumentar
*  e o Acessibilidade.diminuir_texto() para diminuir.
*
*  Mude se quiser o limite de tamanho no 'if' onde encontra-se o 250 
*  (equivale a 250%) e a gradatividade (10% em 10%);
*
*/

function pegar_elementos_por_classe(myclass) {
    /**
     *
     *  Este método substituira o "getElementsByClassName"
     *  caso o navegador não possua o suporte nativo (IEs);
     *
     **/

    document.getElementsByClassName = function(myclass) {
        var elementos, resultados, i;
        elementos = document.getElementsByTagName('*');
        resultados = [];

        for (i = 0; i < elementos.length; i += 1) {
            if (elementos[i].className === myclass) {
                resultados.push(elementos[i]);
            }
        }
        return resultados;
    };
    return document.getElementsByClassName(myclass);
}

var Acessibilidade = {
    size: 100,
    aumentar_texto: function() {
        var i;
        if (this.size < 250) {
            this.size += 10;
            try {
                for (i = 0; i < document.getElementsByClassName('acessivel').length; i += 1) {
                    document.getElementsByClassName('acessivel')[i].style.fontSize = this.size + '%';
                }
            } catch (e) { // IE
                for (i = 0; i < pegar_elementos_por_classe('acessivel').length; i += 1) {
                    pegar_elementos_por_classe('acessivel')[i].style.fontSize = this.size + '%';
                }
            }
        }
    },

    diminuir_texto: function() {
        var i;
        if (this.size > 100) {
            this.size -= 10;
            try {
                for (i = 0; i < document.getElementsByClassName('acessivel').length; i += 1) {
                    document.getElementsByClassName('acessivel')[i].style.fontSize = this.size + '%';
                }
            } catch (e) { // IE
                for (i = 0; i < pegar_elementos_por_classe('acessivel').length; i += 1) {
                    pegar_elementos_por_classe('acessivel')[i].style.fontSize = this.size + '%';
                }
            }
        }
    }
};

window.onload = function() {
    var plus, less;
    plus = document.getElementById('plus');
    less = document.getElementById('less');
    plus.onclick = function() {
        Acessibilidade.aumentar_texto();
    };
    less.onclick = function() {
        Acessibilidade.diminuir_texto();
    };
};