উত্তর:
কয়েক বছর দেরীতে হলেও এখানে একটি সমাধান যা ইনলাইন স্টাইলিং এবং বাহ্যিক স্টাইলিং উভয়ই পুনরুদ্ধার করে:
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);
:)
দু'বছর দেরী হয়ে গেছে তবে আপনি যে সমাধানটি সন্ধান করছেন তা আমার কাছে রয়েছে। মূল লেখককে ক্রেডিট নেওয়ার ইচ্ছা নেই , এখানে একটি প্লাগইন পাওয়া গেছে যা আপনার প্রয়োজনের জন্য ব্যতিক্রমীভাবে ভাল কাজ করে, তবে সমস্ত ব্রাউজারে এমনকি আইইয়ের সমস্ত সম্ভাব্য শৈলী পায় ।
সতর্কতা: এই কোডটি প্রচুর আউটপুট উত্পন্ন করে এবং খুব কম ব্যবহার করা উচিত। এটি কেবলমাত্র সমস্ত স্ট্যান্ডার্ড সিএসএস বৈশিষ্ট্যই অনুলিপি করে না, তবে সেই ব্রাউজারের জন্য সমস্ত বিক্রেতা সিএসএস বৈশিষ্ট্যগুলিও অনুলিপি করে।
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
।
আমি বিভিন্ন বিভিন্ন সমাধান চেষ্টা করেছিলাম। এটি কেবলমাত্র আমার জন্য কাজ করেছিল যে এটি ক্লাস পর্যায়ে এবং শৈলীতে প্রয়োগ করা শৈলীর উপাদানগুলিতে সরাসরি উপাদান হিসাবে দায়ী হিসাবে বেছে নিতে সক্ষম হয়েছিল। সুতরাং সিএসএস ফাইল স্তরে একটি ফন্ট সেট করা এবং স্টাইলের বৈশিষ্ট্য হিসাবে একটি; এটি সঠিক ফন্টটি ফিরিয়ে দিয়েছে।
এটা সহজ! (দুঃখিত, আমি এটি কোথায় পেয়েছিলাম তা খুঁজে পাচ্ছি না)
//-- 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];
}
@ মার্কনেডালের সমাধানটি আমার জন্য হাইফেনেটেড প্রপার্টি দখল করছিল না (উদাহরণস্বরূপ max-width
), তবে প্রথম for
লুপটি পরিবর্তন করে css2json()
এটি কাজ করেছিল এবং আমার সন্দেহ হয় যে আরও কম পুনরাবৃত্তি ঘটায়:
for (var i = 0; i < css.length; i += 1) {
s[css[i]] = css.getPropertyValue(css[i]);
}
মাধ্যমে loops length
বদলে in,
মাধ্যমে আহরণ getPropertyValue()
বদলেtoLowerCase().