Pegar valores do css de um elemento

[vini_loock]

Olá, estou desenvolvendo um framework para por em prática o que eu venho estudando sobre JS OO.

Está tudo normal, exceto a parte que deveria pegar o estilo de algum elemento. Está retornando "null".

Eu dei uma boa garimpada e tentei de todas as formas que eu achei, porem nenhuma funcionou, então voltei à versão que eu fiz inicialmente para postar aqui(é a que eu mais achei que fosse dar certo).

A linha é essa:

return document.defaultView.getComputedStyle(el, null).getPropertyValue(css)

a variável el é basicamente isso:

var el = document.getElementById('id_da_div');

e a váriavel css é uma string contendo a palavra "backgroundColor". Seguindo pela lógia, ele deveria me retornar "blue" que é a cor que eu defini no css, porém, está me retornando "null". Esse probleminha ta bem chato, se alguém puder me ajudar, serei muito grato. Ah.. e claro não é?, caso alguém queira copiar o inicio do meu framework, ai está:

/* Verifica se o dado passado em str é uma string */
function is_string(str){
    return typeof str == 'string'
}

/* Verifica se o dado passado em str é um array */
function is_array(str){
    return typeof str == 'object' && (str instanceof Array)
}

/* Verifica se o dado passado em str é um numero inteiro */
function is_int(str){
    return str.toString().replace(/\D/g, '') == str
}

/* Verifica se o dado passado em str é um número */
function is_number(str){
    return str.toString().replace(/[^0-9\.]/g, '') == str
}

/*
 * Método construtor
 * els : css seletor ou elementos {string|object}
 */
function Nojim(els){
    if(is_string(els))
        this.elements = document.getElementById(els);
    else
        this.elements = els;
    return this;
}

/* Informações */
Nojim.prototype.info = {
    version   : 0.0006,
    author    : 'Vinicius Borges',
    authorUrl : 'viniciusborges.com.br',
    copyright : 'Todos os direitos reservados - Vinicius Borges'
};

/*
 * Identifica o navegador
 */
Nojim.prototype.browser = {
    msie: navigator.userAgent.toLowerCase().indexOf('msie') !== -1,
    mozilla: navigator.userAgent.toLowerCase().indexOf('mozilla') !== -1,
    webkit: navigator.userAgent.toLowerCase().indexOf('webkit') !== -1,
    chrome: navigator.userAgent.toLowerCase().indexOf('chrome') !== -1,
    safari: navigator.userAgent.toLowerCase().indexOf('safari') !== -1,
    opera: navigator.userAgent.toLowerCase().indexOf('opera') !== -1,
    version: navigator.appVersion,
};

/*
 * Ao carregar todo o html
 */
Nojim.prototype.ready = function(fn){
    stateRead = setInterval(function(){
        if(document.body){
            clearInterval(stateRead);
            fn.call(this);
        }
    }, 10);
}

/*
 * Adiciona um evento
 * @evt : evento {string}
 * @fn : função ao executar o evento {function}
 */
Nojim.prototype.on = function(evt, fn){
    this.each(function(){
        this.addEventListener('on'+evt, fn.call(this))
    });
}

/*
 * Percorre e aplica uma função a todos os elementos selecionados
 * fn : função a ser aplicada {function}
 */
Nojim.prototype.each = function(fn){
    if(is_array(this.elements)){
        for(i = 0; i < this.elements.length; i++){
            fn.call(this.elements[i]);
        }
    }else{
        fn.call(this.elements);
    }
    return this;
}

/*
 * Retorna o html dos elementos selecionados
 * Ou substitui o conteudo atual pelo passado na variável html
 * @html : conteudo que substituirá o conteudo atual {string} - opcional
 */
Nojim.prototype.html = function(html){
    if(html !== undefined){
        this.each(function(){
            this.innerHTML = html;
        });
        return this;
    }
    if(is_array(this.elements))
        return this.elements[0].innerHTML
    else
        return this.elements.innerHTML
}

/*
 * Adiciona um html aos elementos selecionados
 * @tml : html a ser adicionado {string}
 */
Nojim.prototype.append = function(html){
    this.each(function(el){
        el.innerHTML += html
    });
    return this;
}

/*
 * Adiciona uma class aos elementos selecionados
 * @c : class a ser adicionada {string}
 */
Nojim.prototype.addClass =  function(c){
    this.each(function(){
        this.className += ' '+c;
    })
}

/*
 * Remove uma class dos elementos selecionados
 * @c : class a ser removida {string}
 */
Nojim.prototype.removeClass = function(c){
    this.each(function(){
        this.className = this.className.replace(new RegExp('(\\S|^)'+c+'\\s|$'), '')
    });
    return this;
}

/*
 * Procura uma class nos elementos Selecionados
 * @c : class a ser encontrada {string}
 */
Nojim.prototype.hasClass = function(c){
    this.each(function(){
        return this.className.match(new RegExp('(\\s|^)'+c+'(\\s|$)'));
    });
}

/*
 * Busca um elemento dentro dos elementos já selecionados
 */
Nojim.prototype.find = function(){
    return this;
}

/*
 * Seleciona o elemento pai de cada elemento já selecionado
 */
Nojim.prototype.parent = function(){
    return this;
}

/*
 * Aciciona/Pega estilo aos elementos selecionados
 */
Nojim.prototype.css = function(css, val){
    if(is_string(css)){
        if(val !== undefined){
            this.each(function(){
                this.style[css] = val;
            });
        }else{
            var el = is_array(this.elements) ? this.elements[0] : this.elements;
            if(el.currentStyle)
                return el.currentStyle[css]
            else if(window.getComputedStyle)
                return document.defaultView.getComputedStyle(el, null).getPropertyValue(css)
        }
    }else{
        for(var i in css){
            this.each(function(){
                this.style[i] = css[i];
            });
        }
    }
    return this;
}

/*
 * Instancia a classe de uma forma mais elegante
 */
function $(e){
    var e = e == undefined ? window : e;
    return new Nojim(e);
}

/*
 * Exemplos
 * ------------------------------------
 * estrutura básica recomendada
 *        $(document).ready(function(){
 *            //script aqui
 *        });
 * ------------------------------------
 * Verificar se é Internet Explorer
 *        $(document).ready(function(){
 *            if($().browser.msie){
 *                alert('Internet Explorer');
 *            }
 *        });
 * ------------------------------------
 */

É a mesma sintaxe que a jQuery usa, só que é claro, muito menos recursos..

Se não for pedir muito, poderia deixar os créditos não é??!

Editado Dezembro 12, 2011 por vini_loock

[vini_loock]

Descobri que está correto, são apenas algumas propriedades que não retornam nada, qual o motivo disso?

[lucas.js]

Tenta assim pra ver:

document.defaultView.getComputedStyle(el, null).backgroundColor;

ou

document.defaultView.getComputedStyle(el, null)["backgroundColor"];

[vini_loock]

Putz, legal funcionou, vou testar se dessa forma consigo pegar todas as propriedades.

document.defaultView.getComputedStyle(el, null).backgroundColor;

[vini_loock]

Putz, mas ainda não funciona todas, existe algum outro método de pegar as propriedades css?

Atualmente estou tentando pegar assim:

return document.defaultView.getComputedStyle(this.elements[0], null)[css] || el.style[css];

Mas ele não pega se a var css for por exemplo:

border;

borderColor;

[lucas.js]

Descobri o erro cara;

getPropertyValue só aceita exatamente como está no CSS.

ou seja não funciona para "backgroundColor", mas se você tentar com "background-color" funciona de boa.

Outra coisa...

Muitas vezes o simples .style[css] retorna o valor.

if(el.style[css])return el.style[css];
else if(el.currentStyle)return el.currentStyle[css];
else if(document.defaultView && document.defaultView.getComputedStyle){
    css=css.replace(/([A-Z])/g,"-$1").toLowerCase(); //para funcionar corretamente
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(css);
}else return null

Editado Dezembro 24, 2011 por lucas.js