আপনি ভাবেন যে জিক্যুয়ারি যা করতে পারে তার সমস্ত কিছুর সাথে উত্তর দেওয়ার জন্য এটি একটি সাধারণ প্রশ্ন হবে। দুর্ভাগ্যক্রমে, সমস্যাটি একটি প্রযুক্তিগত সমস্যাটিতে নেমে আসে: সিএসএস: পরে এবং: নিয়মের আগে ডিওমের অংশ নয়, এবং তাই jQuery এর DOM পদ্ধতি ব্যবহার করে পরিবর্তন করা যায় না।
সেখানে হয় এই জাভাস্ক্রিপ্ট এবং / অথবা সিএসএস সমাধান নীচে উপস্থিত ব্যবহার উপাদান নিপূণভাবে করার উপায়; আপনি কোনটি ব্যবহার করেন তা আপনার সঠিক প্রয়োজনীয়তার উপর নির্ভর করে।
আমি যেটি "সেরা" পদ্ধতির জন্য ব্যাপকভাবে বিবেচিত তা দিয়েই আমি শুরু করতে যাচ্ছি:
1) একটি পূর্বনির্ধারিত শ্রেণি যুক্ত / সরান
এই পদ্ধতির ক্ষেত্রে, আপনি ইতিমধ্যে আলাদা :afterবা :beforeস্টাইল সহ আপনার সিএসএসে একটি ক্লাস তৈরি করেছেন । এটি "ওভাররাইড হয়েছে" তা নিশ্চিত করার জন্য আপনার স্টাইলশিটে পরে এই "নতুন" শ্রেণি স্থাপন করুন:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
তারপরে আপনি jQuery (বা ভ্যানিলা জাভাস্ক্রিপ্ট) ব্যবহার করে সহজেই এই শ্রেণিটি যুক্ত বা সরিয়ে ফেলতে পারেন:
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- পেশাদাররা: jQuery দিয়ে কার্যকর করা সহজ; একসাথে একাধিক শৈলীর দ্রুত পরিবর্তন করে; উদ্বেগের বিচ্ছেদ কার্যকর করে (আপনার এইচটিএমএল থেকে আপনার সিএসএস এবং জেএসকে বিচ্ছিন্ন করে)
- কনস: সিএসএস পূর্ব-লিখিত হতে হবে, বিষয়বস্তুর তাই
:beforeবা :afterসম্পূর্ণরূপে গতিশীল নয়
2) ডকুমেন্টের স্টাইলশিটে সরাসরি নতুন শৈলী যুক্ত করুন
সরাসরি ডকুমেন্ট স্টাইলশিটে স্টাইল :afterএবং :beforeস্টাইল সহ স্টাইল যুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব । jQuery একটি সুবিধাজনক শর্টকাট সরবরাহ করে না, তবে ভাগ্যক্রমে জেএস এতটা জটিল নয়:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()এবং সম্পর্কিত .insertRule()পদ্ধতিগুলি আজ মোটামুটি ভালভাবে সমর্থিত।
একটি প্রকরণ হিসাবে, আপনি ডকুমেন্টটিতে সম্পূর্ণ নতুন স্টাইলশিট যুক্ত করতে jQuery ব্যবহার করতে পারেন, তবে প্রয়োজনীয় কোড কোনও ক্লিনার নয়:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
যদি আমরা মানগুলি কেবলমাত্র যুক্ত না করে "হেরফের" করার কথা বলি তবে আমরা বিদ্যমান বা স্টাইলগুলি ভিন্ন পদ্ধতি ব্যবহার করেও পড়তে:after:before পারি :
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
আমরা সামান্য সংক্ষিপ্ত কোডের জন্য jQuery ব্যবহার করার document.querySelector('p')সাথে প্রতিস্থাপন করতে পারি $('p')[0]।
- পেশাদাররা: যে কোনও স্ট্রিং গতিশীলভাবে শৈলীতে sertedোকানো যেতে পারে
- কনস: মূল শৈলীগুলি পরিবর্তন করা হয় না, কেবল ওভাররাইড করা হয়; পুনরাবৃত্তি (আব) ব্যবহার ডিওএমকে নির্বিচারে বড় করতে পারে
3) একটি ভিন্ন DOM বৈশিষ্ট্য পরিবর্তন করুন
নির্দিষ্ট ডিওএম বৈশিষ্ট্য পড়তে আপনি নিজের সিএসএসেও ব্যবহারattr() করতে পারেন । ( যদি একটি ব্রাউজার সমর্থন করে :before, এটি সমর্থন attr()পাশাপাশি। ) এর সাথে এই মিশ্রন দ্বারা content:কিছু সাবধানে প্রস্তুত সিএসএস, আমরা বিষয়বস্তু (কিন্তু পরিবর্তন করতে পারেন না অন্যান্য বৈশিষ্ট্যাবলী, মার্জিন বা রঙ মত) এর :beforeএবং :afterপরিবর্তনশীল:
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
জাতীয়:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
সিএসএস সময়ের আগে প্রস্তুত না করতে পারলে এটি দ্বিতীয় কৌশলটির সাথে একত্রিত করা যেতে পারে:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- পেশাদাররা: অন্তহীন অতিরিক্ত শৈলী তৈরি করে না
- কনস: সিএসএসে
attr কেবলমাত্র সামগ্রীর স্ট্রিংগুলিতে প্রয়োগ করা যেতে পারে, ইউআরএল বা আরজিবি রঙ নয়