রানটাইমে jQuery সহ একটি সিএসএস নিয়ম / শ্রেণি তৈরি করুন

Question

সাধারণত আমার একটি সিএসএস ফাইল থাকে যার নিম্নলিখিত নিয়ম থাকে:

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

আমি শরীরে রানটাইম ক্রিয়া চলাকালীন সিএসএস তথ্য যুক্ত করে বা এরকম কোনও কিছু যুক্ত করে কীভাবে এই জাতীয় স্থিতিশীল সিএসএস ফাইল তৈরি করা এড়াতে পারি? (কেবল jQuery ব্যবহার করে)

আমি এটি একবারে jQuery এর সাথে সংজ্ঞায়িত করতে এবং পরে অনেক বার ব্যবহার করতে চাই; এজন্য আমি প্রতিবার এটি নির্দিষ্ট ডিওএম উপাদানগুলিতে যুক্ত করতে চাই না।

আমি সাধারণ বৈশিষ্ট্যগুলি ( css("attr1", "value");) জানি , তবে কীভাবে আমি একটি সম্পূর্ণ পুনরায় ব্যবহারযোগ্য সিএসএস বিধি তৈরি করতে পারি?

Answer 1

আপনি শৈলী উপাদান তৈরি করতে এবং এটি ডিওমে intoোকাতে পারেন

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

Opera10 FF3.5 iE8 iE6 এ পরীক্ষা করা হয়েছে tested

Comments

সংক্ষেপটি স্বয়ংসম্পূর্ণ। আপনি এটি স্থানীয়ভাবে তৈরি করতে পারেন এবং এটি ঠিক কাজ করবে। ডাউনলোড লিঙ্কটিতে সরাসরি লিঙ্ক: gist.github.com/gists/714352/

— ড্যানিয়েল রিবেইরো

সমস্যা নেই. কখনও কখনও এটি jQuery গৌণ সংস্করণ বাগ, বা একটি ভুল সেটআপ হতে পারে। জেএস অ্যাপ্লিকেশনগুলির সাথে চুক্তিটি হ'ল: যদি তারা কাজ না করে তবে তারা কেবল কোনও কাজ করে না। ক্ষমা নেই।

— ড্যানিয়েল রিবেইরো

আইই 8-তে আমার জন্য ' পদ্ধতি বা সম্পত্তি অ্যাক্সেসে অপ্রত্যাশিত কল ' ত্রুটি ছুড়ে ফেলে। কাজটি করার জন্য আমাকে এই নিবন্ধটি অনুসরণ করতে হয়েছিল।

— ব্র্যান্ডন বুন

সেখানে IE9- পৃষ্ঠার একমাত্র 31 শৈলী হতে পারে blogs.msdn.com/b/ieinternals/archive/2011/05/14/...

— IvanH

যদি এটি কাজ না করে। শৈলীতে সংযোজন শৈলী চেষ্টা করুন body। অর্থাত্$("<style>...</style>").appendTo("body");

— ইনড্রিম

Answer 2

কেবল

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

পিছনে স্ল্যাশ লক্ষ্য? এগুলি নতুন লাইনে থাকা স্ট্রিংগুলিতে যোগ দিতে ব্যবহৃত হয়। এগুলি ত্যাগ করা একটি ত্রুটি তৈরি করে।

Comments

এই. গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি আসলে প্রশ্নের উত্তর দেয়।

— জোহানেস পিল

আমি @ জোহানেসপিলের সাথে একমত, এটিই আসল উত্তর!

— বায়ু

কর্ডোভা আইওএসে কাজ করছেন না। আপনি কি এই সম্পর্কে পরামর্শ দিতে হবে?

— রামগ্রাগ

বেশ দক্ষ এবং সোজা। একবার নতুন নিয়ম শিরোনামে ইনজেকশনের পরে, আপনি পিএইচপি থেকে অন্তর্ভুক্ত আপনার পৃষ্ঠার যে কোনও জায়গায় এটি পুনরুদ্ধার করতে পারেন।

— ব্রাইস কসটিলাস

হিসাবে একই stackoverflow.com/questions/1720320/...

— user1742529

Answer 3

আপনি একটি বস্তু সিএসএস প্রয়োগ করতে পারেন। সুতরাং আপনি আপনার জাভাস্ক্রিপ্টগুলিতে নিজের অবজেক্টটি এভাবে সংজ্ঞায়িত করতে পারেন:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

এবং তারপরে আপনার পছন্দসই উপাদানগুলিতে কেবল এটি প্রয়োগ করুন

$("#myelement").css(my_css_class);

সুতরাং এটি পুনরায় ব্যবহারযোগ্য। আপনি কি উদ্দেশ্যে যদিও এই কাজ করবেন?

Comments

আমি বলতে হবে এই একটি CSS এর নিয়ম এবং না একটি CSS বর্গ।

— হিপ্পিট্রেইল

এই উত্তরটি বিভ্রান্তিকর। প্রশ্নকর্তা রানটাইমের সময় একটি সিএসএস বিধি তৈরি করতে চেয়েছিলেন, নির্দিষ্ট উপাদানটির স্টাইলকে ধ্রুবক (পুনরায় ব্যবহারযোগ্য) সিএসএস ঘোষণায় সেট না করে।

— ড্যান ড্যাসক্লেস্কু

এটি তারা যা চেয়েছিল তা ঠিক নয়, তবে এটি সঠিক সমাধান :) অতিরিক্ত <স্টাইল> উপাদান দিয়ে ডোম পূরণ করাতে কিছু বাজে কোড গন্ধ আছে

— কেভিন

আপনার যখন প্রয়োজন হয় তখন আপনি এই নিয়মগুলি কীভাবে সরিয়ে

— বিশ্বনাথ

@ কেভিন - এটি হতে পারে তবে অনেক সময় এমন হয় যখন আপনার প্রয়োজন হয়। উদাহরণস্বরূপ - যখন কোনও অজ্যাক্স স্ক্রিপ্ট দ্বারা কোনও উপাদান পুনরায় তৈরি করা হচ্ছে এবং আপনাকে একটি নতুন শৈলীর নিয়ম বজায় রাখা দরকার।

— বিলিন্নাহ

Answer 4

আপনি insertRule ব্যবহার করতে পারেন আপনি ইন্টারনেট <9 সমর্থন করার জন্য প্রয়োজন হবে না অনুযায়ী dottoro । পাশাপাশি ক্রস ব্রাউজার কোডের একটি বিট রয়েছে।

document.styleSheets[0].insertRule('#my-window {\
    position: fixed;\
    z-index: 102;\
    display:none;\
    top:50%;\
    left:50%;\
}', 0)

Answer 5

এখানে একটি jquery প্লাগইন যা আপনাকে সিএসএস ইনজেক্ট করার অনুমতি দেয়:

https://github.com/kajic/jquery-injectCSS

উদাহরণ:

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

Answer 6

এটি এখানে এবং এখানে বর্ণিত ধারণাটি ব্যবহার করে এমন কয়েকটি উত্তরগুলির তুলনায় নতুন কিছু নয় , তবে আমি জেএসওএন-স্টাইল ঘোষণাকে ব্যবহার করতে চেয়েছিলাম:

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

ব্যবহার:

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

এটি সিএসএসের সমস্ত ক্ষমতা কভার করে কিনা তা আমি নিশ্চিত নই, তবে এখনও পর্যন্ত এটি আমার পক্ষে কাজ করে। যদি এটি না হয় তবে এটি আপনার নিজের প্রয়োজনের জন্য একটি সূচনা পয়েন্ট বিবেচনা করুন। :)

Answer 7

আপনি যদি কোনও সিএসএস ব্লক / ফাইলে সিএসএস হার্ডকোড করতে না চান তবে আপনি jQuery ব্যবহার করে এইচটিএমএল উপাদানসমূহ, আইডি এবং ক্লাসগুলিতে গতিশীলভাবে সিএসএস যুক্ত করতে পারেন।

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

Comments

এই উত্তরটি প্রশ্নকর্তা যা চেয়েছিলেন তা পুরোপুরি নয়। প্রশ্নকর্তা রানটাইমের সময় একটি সিএসএস বিধি তৈরি করতে চেয়েছিলেন, স্থির সিএসএস ঘোষণায় কোনও নির্দিষ্ট উপাদানের স্টাইল সেট না করে set

— ড্যান ড্যাসকলেসকু

আমি বুঝতে পারি, তবে এটি একটি বিকল্প সমাধান, তাই আমি এটি সরবরাহ করেছি।

— মাইক Trpcic

@ মাইকটিআরপিসিক সমস্যাটি হ'ল অন্য ব্যক্তিরাও এই সমাধানটির সন্ধান করছেন - কোনও পৃষ্ঠায় সিএসএস বিধি যুক্ত করতে - এবং আপনার উত্তর এটি সমাধান করে না।

— Nate

Answer 8

কাস্টম বিধি যুক্ত করা দরকারী যদি আপনি এমন একটি jQuery উইজেট তৈরি করেন যার জন্য কাস্টম সিএসএসের প্রয়োজন হয় (যেমন আপনার নির্দিষ্ট উইজেটের জন্য বিদ্যমান jQueryUI সিএসএস কাঠামো বাড়ানো)। এই সমাধানটি তারাসের উত্তরের উপর ভিত্তি করে (উপরের প্রথমটি)।

ধরে নিই আপনার এইচটিএমএল মার্কআপে "অ্যাড্রুল" এর একটি আইডি এবং একটি ডিভের সাথে কিছু পাঠ্যযুক্ত "টার্গেট" আইডি রয়েছে:

jQuery কোড:

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type='text/css'> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

এই পদ্ধতির সুবিধাটি হ'ল আপনি ইচ্ছামত নিয়মগুলি যোগ করতে বা বিয়োগ করতে আপনার কোডে পরিবর্তনশীল cssrules পুনরায় ব্যবহার করতে পারেন। যদি cssrules একটি স্থির বস্তু যেমন একটি jQuery উইজেট এম্বেড করা থাকে আপনার সাথে কাজ করার জন্য একটি অবিরাম স্থানীয় ভেরিয়েবল রয়েছে।

Comments

কি সুন্দর ধারণা! আমি এই পৃষ্ঠায় স্নিপেটের সাথে ব্যবহার করেছি ssdtutorials.com/tutorials/title/jquery-flashing-text.html একটি রঙ টগল করার জন্য অনুমতি দিতে (মূলটি কেবলমাত্র একটি শ্রেণিতে টগল করবে)। ধন্যবাদ!

— বিজিএম কোডার

Answer 9

নোট করুন যে jQuery().css()স্টাইলশিট বিধি পরিবর্তন করে না, এটি কেবল প্রতিটি ম্যাচের উপাদানগুলির স্টাইল পরিবর্তন করে।

পরিবর্তে, এখানে একটি জাভাস্ক্রিপ্ট ফাংশন আমি স্টাইলশিট নিয়মগুলিকে নিজেরাই সংশোধন করতে লিখেছিলাম।

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
        }
    }

সুবিধাদি:

• স্টাইলগুলি একটিতে গণনা করা যায় <head>DOM উপাদানগুলি তৈরি হওয়ার আগে স্ক্রিপ্টে এবং সুতরাং দস্তাবেজের প্রথম রেন্ডারিংয়ের আগে দৃশ্যমান-বিরক্তিকর রেন্ডার এড়ানো, তারপরে গণনা করা, তারপরে পুনরায় রেন্ডার করা। JQuery এর সাথে আপনাকে DOM উপাদানগুলি তৈরি হওয়ার জন্য অপেক্ষা করতে হবে, তারপরে পুনরায় স্টাইল এবং সেগুলি পুনরায় রেন্ডার করতে হবে।
• পুনরুদ্ধারের পরে গতিশীল যুক্ত হওয়া উপাদানগুলিতে অতিরিক্ত কল না করে স্বয়ংক্রিয়ভাবে নতুন স্টাইল প্রয়োগ করা হবে jQuery(newElement).css()

আদেশ সহকারে:

• আমি এটি Chrome এবং IE10 এ ব্যবহার করেছি। আমি মনে করি এটি IE এর পুরানো সংস্করণগুলিতে ভালভাবে কাজ করার জন্য কিছুটা পরিবর্তন দরকার হতে পারে। বিশেষত, IE এর পুরানো সংস্করণগুলি s.cssRulesসংজ্ঞায়িত নাও করতে পারে , তাই এগুলি আবার পড়ে যাবে s.rulesযার মতো কিছু অদ্ভুততা রয়েছে, যেমন কমা-বিস্মৃত নির্বাচকদের মতো বিজোড় / বগি আচরণ "body, p"। আপনি যদি এগুলি এড়িয়ে যান তবে আপনি সংশোধন ছাড়াই পুরানো আইই সংস্করণগুলিতে ঠিক থাকতে পারেন, তবে আমি এটি এখনও পরীক্ষা করে দেখিনি।
• বর্তমানে নির্বাচকদের হুবহু মিলে যাওয়া দরকার: লোয়ার কেস ব্যবহার করুন এবং কমা-বিস্মৃত তালিকা সহ সতর্কতা অবলম্বন করুন; অর্ডারটি মিলতে হবে এবং সেগুলি ফর্ম্যাটে হওয়া উচিত "first, second"অর্থাৎ ডিলিমিটারটি একটি কমা যা তার পরে একটি স্থানের অক্ষর।
• কমা-বিসীমাবদ্ধ তালিকার মতো ওভারল্যাপিং নির্বাচকদের সনাক্তকরণ এবং বুদ্ধিমানের সাথে পরিচালনা করার চেষ্টা করে কেউ সম্ভবত এতে অতিরিক্ত কিছু সময় ব্যয় করতে পারে।
• কেউ !importantখুব বেশি সমস্যা ছাড়াই মিডিয়া ক্যোয়ারী এবং সংশোধককে সমর্থন যোগ করতে পারে ।

আপনি যদি এই ফাংশনটিতে কিছু উন্নতি করতে চান বলে মনে করেন তবে আপনি এখানে কিছু দরকারী এপিআই ডক্স পাবেন: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 10

(অসাধারণ) ক্ষেত্রে যেখানে আপনি প্রায়শই শৈলী পরিবর্তন করতে সক্ষম হতে চান - যেমন একটি থিম নির্মাতা অ্যাপ্লিকেশন - <স্টাইল> ট্যাগ যুক্ত করা বা CSSStyleSheet.insertRule কল করা) এর ফলে ক্রমবর্ধমান স্টাইলশিট তৈরি হবে, যার কার্য সম্পাদন এবং নকশা থাকতে পারে ডিবাগিং প্রভাব।

আমার পদ্ধতির শুধুমাত্র নির্বাচক / সম্পত্তি কম্বো প্রতি একক নিয়ম অনুমতি দেয়, যে কোনও বিধি সেট করার ক্ষেত্রে বিদ্যমান বিদ্যমান সাফ করে। এপিআই সহজ এবং নমনীয়:

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

ব্যবহার:

addStyles('body', {
    'background-color': 'black',
    color: 'green',
    margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')

Answer 11

আপনি যদি নিজের পৃষ্ঠায় (আপনার গতিশীল নিয়মাবলী নিয়ে) একটি লিপি <স্ক্রিপ্ট> বিভাগ লেখেন এবং তারপরে এই গতিশীলভাবে তৈরি করা নিয়মগুলি যোগ করতে jQuerys .addClass (শ্রেণি) ব্যবহার করেন?

আমি এটি চেষ্টা করি নি, কেবল একটি তত্ত্ব প্রস্তাব দিচ্ছি যা কাজ করতে পারে।

Comments

এখনই সেরা উপায় seams। আমি jQuery.cssRule কিছু খুঁজে পেয়েছি তবে এটি একরকম প্লাগইন: - /

— স্টেফান

"(" প্রধান ")। সংযোজন (<(" <শৈল প্রকার = 'পাঠ্য / সিএসএস'> ... ... এক উপায়

— স্টেফান

Answer 12

একটি অলসতার উত্তরটি এর উত্তর দেয়, তবে নিম্নলিখিত নিবন্ধটি সহায়তা করতে পারে: http://www.javascriptkit.com/dhtmltutors/externcss3.shtml

এছাড়াও, গুগলে "সিএসএস বিধি সংশোধন" টাইপ করার চেষ্টা করুন

আপনি যদি jQuery () দিয়ে একটি ডকুমেন্ট.স্টাইলশিট [0] মোড়ানোর চেষ্টা করেন তবে কী হবে তা নিশ্চিত নন যদিও আপনি এটি চেষ্টা করে দেখতে পারেন

Answer 13

আপনি একটি cssRule প্লাগ-ইন ব্যবহার করতে পারেন । কোডটি তখন সহজ ছিল:

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

এখনও অবধি একটি মন্তব্য জিজ্ঞাসা করেছে যে কেউ কেন এমন কিছু করতে চান? উদাহরণস্বরূপ, তালিকার জন্য স্টাইল তৈরি করা যেখানে প্রতিটি আইটেমের একটি পৃথক পটভূমির রঙের প্রয়োজন (যেমন, GCal এর ক্যালেন্ডারের তালিকা) যেখানে কলামগুলির সংখ্যা রান সময় পর্যন্ত জানা যায় না।

Comments

@ ড্যানিয়েল, হ্যাঁ এটি করে; বিবৃতি সরানো হয়েছে।

— রবার্ট গোল্যান্ড

দেখে মনে হচ্ছে এটি এর মতো কোনও নিয়মকে সমর্থন করে না:div:before{content:'name: ';}

— Liuyanghejerry

Answer 14

এখানে একটি সেটআপ রয়েছে যা এই জসন অবজেক্টের সাথে রঙের উপরে কমান্ড দেয়

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

এই ফাংশন

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("\n"))
    )
}

এই শৈলী উপাদান উত্পাদন

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

Answer 15

আপনি যদি কোনও ডিসপ্লে বরাদ্দ করতে না চান: সিএসএস শ্রেণিতে কেউই নয়, স্টাইলের সাথে যুক্ত হওয়ার জন্য সঠিক পদ্ধতির, jQuery.Rule কাজটি করুন।

আমি কিছু ক্ষেত্রে আপনি এজাক্স সামগ্রীর সংযোজন ইভেন্টের আগে স্টিল প্রয়োগ করতে চান এবং সংযোজনের পরে সামগ্রী ফেইড করেন এবং এটিই!

Answer 16

সিএসএস শ্রেণির সম্পূর্ণ সংজ্ঞা পেতে এখানে আপনার একটি ফাংশন রয়েছে:

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '';
};

Answer 17

আপনি cssobj নামে এই lib ব্যবহার করতে পারেন

var result = cssobj({'#my-window': {
  position: 'fixed',
  zIndex: '102',
  display:'none',
  top:'50%',
  left:'50%'
}})

আপনি যে কোনও সময় নিজের বিধিগুলি আপডেট করতে পারবেন:

result.obj['#my-window'].display = 'block'
result.update()

তারপরে আপনি নিয়ম পরিবর্তন করেছেন। jQuery হ'ল এই কাজটি করা লিবিব নয়।

Answer 18

আমি সম্প্রতি এর কয়েকটি নিয়ে জগাখিচুড়ি করছি এবং কোনও আইফোন / আইপড সাইট প্রোগ্রামিং করার সময় আমি দুটি ভিন্ন পদ্ধতির ব্যবহার করেছি।

ওরিয়েন্টেশন পরিবর্তনের সন্ধান করার সময় আমি প্রথম যে পথটি পৌঁছেছিলাম যাতে আপনি দেখতে পাচ্ছেন যে ফোনটি প্রতিকৃতি বা ল্যান্ডস্কেপ, এটি একটি খুব স্থির উপায় তবে সহজ এবং চতুর:

সিএসএসে:

#content_right,
#content_normal{
 display:none;
}

জেএস ফাইলটিতে:

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

পিএইচপি / এইচটিএমএলে (আপনার জেএস ফাইলটি প্রথমে বডি ট্যাগে আমদানি করুন):

<body onorientationchange="updateOrientation();">

এটি জেএস ফাইল থেকে ফিরে দেওয়া ফলাফলের উপর নির্ভর করে চালানোর জন্য একটি পৃথক প্রাক সেট সিএসএস ব্লক চয়ন করে।

এছাড়াও আরও গতিশীল উপায়ে যা আমি পছন্দ করেছি তা হ'ল একটি স্ক্রিপ্ট ট্যাগ বা আপনার জেএস ফাইলের সাথে খুব সাধারণ সংযোজন:

document.getelementbyid(id).style.backgroundColor = '#ffffff';

এটি বেশিরভাগ ব্রাউজারের জন্য কাজ করে তবে IE এর পক্ষে আরও শক্ততর কিছু সহকারে গোলাবারুদ তা কেড়ে নেওয়া ভাল:

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

অথবা আপনি getElementByClass()বিভিন্ন আইটেম ব্যবহার এবং পরিবর্তন করতে পারেন ।

আশাকরি এটা সাহায্য করবে!

অ্যাশ।

Answer 19

হতে পারে আপনি স্টাইলের তথ্য আপনার সিএসএস ফাইলে একটি পৃথক শ্রেণিতে রাখতে পারেন, যেমন:

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

এবং তারপরে আপনার ক্লাসের নামটি উপাদানটিতে যুক্ত করার জন্য আপনার পছন্দের পয়েন্টে jQuery ব্যবহার করবেন?

Comments

এবং আপনি আপনার পৃষ্ঠার প্রধান বিভাগে (স্টাইল ট্যাগের মধ্যে) তথ্য রাখতে চান না?

— জোড়েনবি

Answer 20

আপনি ঠিক একটি সিএসএস ক্লাস তৈরি করতে পারেন যা .fixed- অবজেক্টের মতো কিছু বলে যা এতে আপনার সমস্ত CSS আছে ...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

তারপরে jquery এ আপনি যে কোনও স্টাইলের জন্য কিছু চান কেবল সেই শ্রেণীর সাথে এটি যুক্ত করুন ...

$(#my-window).addClass('fixed-object');

এটি করার সহজতম পদ্ধতির মতো মনে হচ্ছে, যদি না আমি আপনার কাজটি করা কী ভুল বুঝি।

Answer 21

Jquery এ .addClass () ব্যবহার করে আমরা পৃষ্ঠায় উপাদানগুলিতে গতিশীলভাবে শৈলী যুক্ত করতে পারি। যেমন। আমাদের স্টাইল আছে

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

এখন jquery প্রস্তুত অবস্থায় আমরা .addClass (মাই স্টাইল) এর মতো CSS যুক্ত করতে পারি