Czy jQuery może uzyskać wszystkie style CSS powiązane z elementem?
Czy istnieje sposób w jQuery, aby uzyskać wszystkie CSS z istniejącego elementu i zastosować go do innego bez wymieniania ich wszystkich?
Wiem, że zadziałałoby, gdyby były atrybutem stylu z attr()
, ale wszystkie moje style są w zewnętrznym arkuszu stylów.
5 answers
Kilka lat później, ale oto rozwiązanie, które pobiera zarówno stylizację inline, jak i stylizację zewnętrzną:
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;
}
Przekaż obiekt jQuery do css()
i zwróci obiekt, który możesz następnie podłączyć z powrotem do $().css()
jQuery, np:
var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);
:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-05 07:02:02
Dwa lata spóźnienia, ale mam rozwiązanie, którego szukasz. Nie zamierzając wziąć kredyt postaci oryginalny autor , Oto plugin, który znalazłem działa wyjątkowo dobrze dla tego, czego potrzebujesz, ale dostaje Wszystkie możliwe style we wszystkich przeglądarkach, nawet IE.
Warning: ten kod generuje dużo danych wyjściowych i powinien być używany oszczędnie. Nie tylko kopiuje wszystkie standardowe właściwości CSS, ale także wszystkie właściwości CSS dostawcy dla tego przeglądarka.
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);
Podstawowe użycie jest dość proste, ale napisał do tego funkcję:
$.fn.copyCSS = function(source){
var styles = $(source).getStyleObject();
this.css(styles);
}
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-02 15:58:42
Dlaczego nie używać .style
element DOM ? Jest to obiekt, który zawiera elementy takie jak width
i backgroundColor
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-04 09:49:03
Próbowałem wielu różnych rozwiązań. Był to jedyny, który działał dla mnie, ponieważ był w stanie odebrać style stosowane na poziomie klasy i w stylu przypisanym bezpośrednio do elementu. Tak więc czcionka ustawiona na poziomie pliku css i jedna jako atrybut stylu; zwracała poprawną czcionkę.
To proste! (Sorry, can ' t find where I originally found it)//-- 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"]
Alternatywnie możesz wyświetlić listę wszystkich stylów, przechodząc przez tablicę
for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-15 20:47:46
@ marknadal rozwiązanie nie było dla mnie chwytaniem właściwości dzielonych (np. max-width
), ale zmiana pierwszej pętli for
w css2json()
sprawiła, że zadziałało i podejrzewam, że wykonuje mniej iteracji:
for (var i = 0; i < css.length; i += 1) {
s[css[i]] = css.getPropertyValue(css[i]);
}
Loops via length
zamiast in,
pobiera via getPropertyValue()
zamiast toLowerCase().
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-16 21:07:24