जवाबों:
एक दो साल देर से, लेकिन यहाँ एक समाधान है जो इनलाइन स्टाइल और बाहरी स्टाइल दोनों को पुनः प्राप्त करता है:
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;
}किसी jQuery ऑब्जेक्ट को पास करें css()और यह एक ऑब्जेक्ट लौटाएगा, जिसे आप फिर jQuery के $().css(), पूर्व में प्लग कर सकते हैं :
var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);:)
दो साल देर से, लेकिन मेरे पास वह उपाय है जिसकी आपको तलाश है। प्रपत्र क्रेडिट लेने के लिए इच्छुक नहीं मूल लेखक , यहाँ जो मैं आपको क्या चाहिए के लिए असाधारण रूप से अच्छा काम करता है पाया एक प्लगइन है, लेकिन हो जाता है सब , सभी ब्राउज़रों में संभव शैलियों भी आईई।
चेतावनी: यह कोड बहुत अधिक आउटपुट उत्पन्न करता है, और इसे संयम से इस्तेमाल किया जाना चाहिए। यह न केवल सभी मानक CSS गुणों की प्रतिलिपि बनाता है, बल्कि उस ब्राउज़र के सभी विक्रेता CSS गुणों की भी।
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);बुनियादी उपयोग बहुत सरल है, लेकिन उन्होंने इसके लिए एक फ़ंक्शन भी लिखा है:
$.fn.copyCSS = function(source){
var styles = $(source).getStyleObject();
this.css(styles);
}उम्मीद है की वो मदद करदे।
this.css()? इस पद्धति के लिए कोई तर्क नहीं लेने के लिए कोई दस्तावेज नहीं है, और यदि यह कथन पहुंचा है, तो यह एक अपवाद फेंकता है। मुझे लगता है कि यह return returns;खाली वस्तु होने पर भी अधिक उपयुक्त होगा ।
$("#div2").copyCSS($("#div1"));और आपके द्वारा उपयोग किए जा सकने वाले किसी भी तत्व की शैली प्राप्त करने के लिए:JSON.stringify($('#element').getStyleObject());
.styleडोम तत्व का उपयोग क्यों नहीं किया जाता है ? यह एक ऐसी वस्तु है जिसमें सदस्य होते हैं जैसे कि widthऔर backgroundColor।
मैंने कई अलग-अलग समाधानों की कोशिश की थी। यह केवल एक ही था जिसने मेरे लिए काम किया था कि यह क्लास स्तर पर और शैली में सीधे तत्व पर आरोपित शैलियों पर लागू करने में सक्षम था। तो css फ़ाइल स्तर पर एक फ़ॉन्ट सेट और एक शैली विशेषता के रूप में; यह सही फ़ॉन्ट लौटा।
यह आसान है! (क्षमा करें, यह नहीं पाया जा सकता कि मैं मूल रूप से कहां पाया गया)
//-- 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"]वैकल्पिक रूप से आप सरणी के माध्यम से साइकिल चलाकर सभी शैली को सूचीबद्ध कर सकते हैं
for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}@ marknadal का समाधान मेरे लिए हाइफ़नेटेड संपत्तियों को हथियाना नहीं था (उदाहरण के लिए max-width), लेकिन पहले forलूप को बदलने से css2json()यह काम करता है, और मुझे संदेह है कि कम पुनरावृत्तियां करता है:
for (var i = 0; i < css.length; i += 1) {
s[css[i]] = css.getPropertyValue(css[i]);
}lengthबजाय के माध्यम से in,प्राप्त करता है के getPropertyValue()बजाय के माध्यम से लूपtoLowerCase().