JQuery কোনও উপাদানগুলির সাথে যুক্ত সমস্ত CSS শৈলী পেতে পারে?


297

বিদ্যমান উপাদান থেকে সমস্ত সিএসএস পেতে এবং সেগুলি তালিকাভুক্ত না করে অন্যটিতে প্রয়োগ করার জন্য কি jQuery এর কোনও উপায় আছে?

আমি জানি তারা যদি স্টাইলের বৈশিষ্ট্যযুক্ত হয় attr()তবে এটি কার্যকর হবে তবে আমার সমস্ত শৈলী একটি বাহ্যিক শৈলীতে রয়েছে।

উত্তর:


340

কয়েক বছর দেরীতে হলেও এখানে একটি সমাধান যা ইনলাইন স্টাইলিং এবং বাহ্যিক স্টাইলিং উভয়ই পুনরুদ্ধার করে:

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);

:)


14
বিটিডাব্লু, আপনি যখন কোনও জেএসএন অবজেক্ট বলবেন , আপনি কেবল একটি জাভাস্ক্রিপ্ট অবজেক্টটি ঠিক বুঝিয়েছেন?
অ্যালেক্স

3
এটি দুর্দান্ত লাগে, কিন্তু যখন আমি এটি চেষ্টা করি তখন এটি ফন্ট-পরিবারের মতো নির্দিষ্ট বৈশিষ্ট্যগুলি থেকে বাদ যায়।
দামান

3
@ ড্যামন: উত্তরের প্রথম লাইনে বিবেচনা করে এটি একটি বৈধ অনুমান যা বলে ... এখানে একটি সমাধান যা ইনলাইন স্টাইলিং এবং বাহ্যিক স্টাইলিং উভয়ই পুনরুদ্ধার করে
অ্যালেক্স

5
এই কোডটি আর কাজ করে না (ক্রোমে সর্বদা খালি বস্তুটি ফেরত দেয়)
ইভান ক্যাসেলেলানোস

12
দ্রষ্টব্য: মডারেটররা আমার মূল কোডটি পরিবর্তন করেছে, আমি কোনও গ্যারান্টি দিচ্ছি না যে কোনও কিছুই কার্যকর হবে।
মার্কনেডাল

90

দু'বছর দেরী হয়ে গেছে তবে আপনি যে সমাধানটি সন্ধান করছেন তা আমার কাছে রয়েছে। মূল লেখককে ক্রেডিট নেওয়ার ইচ্ছা নেই , এখানে একটি প্লাগইন পাওয়া গেছে যা আপনার প্রয়োজনের জন্য ব্যতিক্রমীভাবে ভাল কাজ করে, তবে সমস্ত ব্রাউজারে এমনকি আইইয়ের সমস্ত সম্ভাব্য শৈলী পায় ।

সতর্কতা: এই কোডটি প্রচুর আউটপুট উত্পন্ন করে এবং খুব কম ব্যবহার করা উচিত। এটি কেবলমাত্র সমস্ত স্ট্যান্ডার্ড সিএসএস বৈশিষ্ট্যই অনুলিপি করে না, তবে সেই ব্রাউজারের জন্য সমস্ত বিক্রেতা সিএসএস বৈশিষ্ট্যগুলিও অনুলিপি করে।

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);
}

আশা করি এইটি কাজ করবে.


2
@ ড্যামন: ধন্যবাদ! আমি আমার পোস্ট আপডেট করেছি এবং শব্দটি সামান্য সম্পাদনা করেছি যাতে এটি পরিষ্কার হয় যে এটি আমার কাজ নয়। পূর্ববর্তী শব্দগুলির জন্য দুঃখিত, আমি মনে করি আমি গভীর রাতে এই উত্তরটি টাইপ করেছি, তবে যেভাবেই হোক না কেন এটি বেশ ডুচে ছিল।
ডাকোটা

2
কেন এই ফিরে আসে this.css()? এই পদ্ধতিতে কোনও যুক্তি না নিয়ে কোনও দলিল নেই, এবং যদি এই বিবৃতি পৌঁছে যায় তবে এটি একটি ব্যতিক্রম ছুঁড়ে দেয়। আমি মনে করি এটি return returns;খালি জিনিস হলেও এটি আরও উপযুক্ত হবে।
ত্রিস্তান লি

2
এটির একটি ওয়ার্কিং ডেমো পাওয়া কি সম্ভব? এই কোডটি কোথায় রাখবেন এবং কীভাবে এটি চালু করবেন তা আমার কাছে পরিষ্কার নয়। কোথায় আউটপুট সংরক্ষণ করা হচ্ছে তা আমার কাছেও পরিষ্কার নয়। ধন্যবাদ।
সিমরো

এটি কীভাবে ব্যবহার করতে হয় তা আমি বুঝতে পারি না, এখানে জেসফিডাল নামে একটি জিনিস রয়েছে যা বেশিরভাগ লোক সাহায্যের জন্য ব্যবহার করে। ভাল প্রোগ্রামার সবচেয়ে খারাপ শিক্ষক
জিনো

@ গিনো আপনি যদি ডিভ 1 এর স্টাইলটি ডিভ 2 তে অনুলিপি করতে চান তবে কেবল ব্যবহার করুন: $("#div2").copyCSS($("#div1"));এবং আপনি যে কোনও উপাদান ব্যবহার করতে পারেন তার স্টাইলটি পেতে:JSON.stringify($('#element').getStyleObject());
ওয়াসাম এল মাহডি

16

কেন .styleডিওএম উপাদান ব্যবহার করবেন না ? এটি একটি বস্তুর যেমন সদস্যদের রয়েছে এর widthএবং backgroundColor


1
আমি নিশ্চিত যে ক্লাসের সাথে যুক্ত প্রকৃত শৈলীর একমাত্র উপায় এটি। (গণনা শৈলীর বিপরীতে যা পৃথক পৃথক)
সিজিপি

32
স্টাইলের সাহায্যে আপনি কেবলমাত্র উপাদানটির শৈলীর বৈশিষ্ট্যে প্রয়োগ হওয়া বৈশিষ্ট্য পাবেন, তবে সিএসএস শ্রেণিতে প্রয়োগ করা নয়।
এরিকসোনারন


11

আমি বিভিন্ন বিভিন্ন সমাধান চেষ্টা করেছিলাম। এটি কেবলমাত্র আমার জন্য কাজ করেছিল যে এটি ক্লাস পর্যায়ে এবং শৈলীতে প্রয়োগ করা শৈলীর উপাদানগুলিতে সরাসরি উপাদান হিসাবে দায়ী হিসাবে বেছে নিতে সক্ষম হয়েছিল। সুতরাং সিএসএস ফাইল স্তরে একটি ফন্ট সেট করা এবং স্টাইলের বৈশিষ্ট্য হিসাবে একটি; এটি সঠিক ফন্টটি ফিরিয়ে দিয়েছে।

এটা সহজ! (দুঃখিত, আমি এটি কোথায় পেয়েছিলাম তা খুঁজে পাচ্ছি না)

//-- 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];
}


4

@ মার্কনেডালের সমাধানটি আমার জন্য হাইফেনেটেড প্রপার্টি দখল করছিল না (উদাহরণস্বরূপ 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().

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.