Respostas:
Alguns anos atrasado, mas aqui está uma solução que recupera o estilo embutido e o externo:
function css(a) {
var sheets = document.styleSheets, o = {};
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (a.is(rules[r].selectorText)) {
o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
}
}
}
return o;
}
function css2json(css) {
var s = {};
if (!css) return s;
if (css instanceof CSSStyleDeclaration) {
for (var i in css) {
if ((css[i]).toLowerCase) {
s[(css[i]).toLowerCase()] = (css[css[i]]);
}
}
} else if (typeof css == "string") {
css = css.split("; ");
for (var i in css) {
var l = css[i].split(": ");
s[l[0].toLowerCase()] = (l[1]);
}
}
return s;
}
Passe um objeto jQuery css()
e ele retornará um objeto, que você poderá conectar novamente ao jQuery $().css()
, ex:
var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);
:)
Dois anos atrasado, mas eu tenho a solução que você está procurando. Não pretendendo assumir o crédito do autor original , aqui está um plugin que eu achei que funciona excepcionalmente bem para o que você precisa, mas obtém todos os estilos possíveis em todos os navegadores, até no IE.
Aviso: Este código gera muita saída e deve ser usado com moderação. Ele não apenas copia todas as propriedades CSS padrão, mas também todas as propriedades CSS do fornecedor para esse navegador.
jquery.getStyleObject.js:
/*
* getStyleObject Plugin for jQuery JavaScript Library
* From: http://upshots.org/?p=112
*/
(function($){
$.fn.getStyleObject = function(){
var dom = this.get(0);
var style;
var returns = {};
if(window.getComputedStyle){
var camelize = function(a,b){
return b.toUpperCase();
};
style = window.getComputedStyle(dom, null);
for(var i = 0, l = style.length; i < l; i++){
var prop = style[i];
var camel = prop.replace(/\-([a-z])/g, camelize);
var val = style.getPropertyValue(prop);
returns[camel] = val;
};
return returns;
};
if(style = dom.currentStyle){
for(var prop in style){
returns[prop] = style[prop];
};
return returns;
};
return this.css();
}
})(jQuery);
O uso básico é bastante simples, mas ele também escreveu uma função para isso:
$.fn.copyCSS = function(source){
var styles = $(source).getStyleObject();
this.css(styles);
}
Espero que ajude.
this.css()
? Não há documentação para este método sem argumentos, e se essa instrução for atingida, ela lança uma exceção. Eu acho que seria mais apropriado, return returns;
mesmo que seja um objeto vazio.
$("#div2").copyCSS($("#div1"));
e para obter o estilo de qualquer elemento que você poderia usar:JSON.stringify($('#element').getStyleObject());
Por que não usar .style
o elemento DOM ? É um objeto que contém membros como width
e backgroundColor
.
Eu tentei muitas soluções diferentes. Esse foi o único que funcionou para mim, pois foi capaz de captar os estilos aplicados no nível da classe e no estilo, como diretamente atribuídos ao elemento. Portanto, uma fonte definida no nível do arquivo css e outra como um atributo de estilo; retornou a fonte correta.
É simples! (Desculpe, não consigo encontrar onde o encontrei originalmente)
//-- html object
var element = htmlObject; //e.g document.getElementById
//-- or jquery object
var element = htmlObject[0]; //e.g $(selector)
var stylearray = document.defaultView.getComputedStyle(element, null);
var font = stylearray["font-family"]
Como alternativa, você pode listar todo o estilo percorrendo a matriz
for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}
A solução do @ marknadal não estava pegando propriedades hifenizadas para mim (por exemplo max-width
), mas alterar o primeiro for
loop css2json()
fez com que funcionasse, e suspeito que realiza menos iterações:
for (var i = 0; i < css.length; i += 1) {
s[css[i]] = css.getPropertyValue(css[i]);
}
Loops via em length
vez de in,
recupera via em getPropertyValue()
vez detoLowerCase().