আমি জাভাস্ক্রিপ্ট থেকে সিউডো-ক্লাস সিলেক্টারের (যেমন: লিঙ্ক,: হোভার ইত্যাদি) জন্য সিএসএস বিধি পরিবর্তন করার একটি উপায় খুঁজছি।
তাই সিএসএস কোডের একটি অ্যানালগ: a:hover { color: red }জেএসে।
উত্তর আর কোথাও পাইনি; যদি কেউ জানেন যে এটি এমন কিছু যা ব্রাউজারগুলি সমর্থন করে না, তবে এটি একটি সহায়ক ফলাফলও হবে।
উত্তর:
আপনি কোনও নির্দিষ্ট উপাদানকে সিউডো-ক্লাস একাই স্টাইল করতে পারবেন না, একইভাবে আপনার কোনও ইনলাইন স্টাইল = "..." বৈশিষ্ট্যে সিউডো-ক্লাস থাকতে পারে না (যেমন কোনও নির্বাচক নেই)।
আপনি স্টাইলশিটটি পরিবর্তন করে এটি করতে পারেন, উদাহরণস্বরূপ বিধি যুক্ত করে:
#elid:hover { background: red; }আপনি যে প্রতিটি উপাদানকে প্রভাবিত করতে চান তা ধরে নেওয়ার জন্য এটির নির্বাচনের অনুমতি দেওয়ার জন্য একটি অনন্য আইডি রয়েছে।
তাত্ত্বিকভাবে আপনি যে দস্তাবেজটি চান তা হ'ল http://www.w3.org/TR/DOM-Level-2-Style/Overview.html যার অর্থ আপনি (প্রাক-বিদ্যমান এম্বেডড বা লিঙ্কযুক্ত স্টাইলশিট দেওয়া) যেমন সিনট্যাক্স ব্যবহার করে করতে পারেন:
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';আইই এর অবশ্যই নিজস্ব বাক্য গঠন প্রয়োজন:
document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';পুরানো এবং গৌণ ব্রাউজারগুলি সম্ভবত সিনট্যাক্সকে সমর্থন করবে না। ডায়নামিক স্টাইলশীট-ফিডলিং খুব কমই করা হয় কারণ এটি সঠিক, বিরল প্রয়োজন এবং historতিহাসিকভাবে ঝামেলা পেতে বেশ বিরক্তিকর।
function sameOrigin(url) { var loc = window.location, a = document.createElement('a'); a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol; }
আমি এটির জন্য একটি ছোট লাইব্রেরি ছুঁড়েছি যেহেতু আমি মনে করি জেএসে স্টাইলশিটগুলি পরিচালনা করার জন্য বৈধ ব্যবহারের মামলা রয়েছে। কারণগুলি:
ক্রস ব্রাউজার স্টাফ মোকাবেলা করার জন্য একটি ফাংশন:
addCssRule = function(/* string */ selector, /* string */ rule) {
if (document.styleSheets) {
if (!document.styleSheets.length) {
var head = document.getElementsByTagName('head')[0];
head.appendChild(bc.createEl('style'));
}
var i = document.styleSheets.length-1;
var ss = document.styleSheets[i];
var l=0;
if (ss.cssRules) {
l = ss.cssRules.length;
} else if (ss.rules) {
// IE
l = ss.rules.length;
}
if (ss.insertRule) {
ss.insertRule(selector + ' {' + rule + '}', l);
} else if (ss.addRule) {
// IE
ss.addRule(selector, rule, l);
}
}
};একটি টেম্পলেট স্ট্রিংয়ে কেবল সিএসএস রাখুন।
const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;তারপরে একটি শৈলী উপাদান তৈরি করুন এবং স্টাইল ট্যাগে স্ট্রিংটি স্থাপন করুন এবং এটি নথিতে সংযুক্ত করুন।
const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);নির্দিষ্টতা বাকি যত্ন নেবে। তারপরে আপনি গতিশীল স্টাইল ট্যাগগুলি মুছে ফেলতে এবং যুক্ত করতে পারেন। এটি লাইব্রেরির একটি সহজ বিকল্প এবং ডিওমে স্টাইলশীট অ্যারের সাথে জগাখিচুড়ি। শুভ কোডিং!
insertAdjacentElementপ্রধান ব্রাউজারগুলিতে (ক্রোম, ফায়ারফক্স, এজ) 2 টি আর্গুমেন্ট প্রয়োজন, যার মধ্যে প্রথমটি রেফারেন্স উপাদানটির সাথে সম্পর্কিত অবস্থান স্থাপন করে ( এখানে দেখুন )। এটি কি সাম্প্রতিক পরিবর্তন? (উত্তরে 'পূর্ববর্তী' যুক্ত হয়েছে)
আমার কৌশলটি একটি অ্যাট্রিবিউট সিলেক্টর ব্যবহার করছে। জাভাস্ক্রিপ্ট দ্বারা বৈশিষ্ট্যগুলি সেট আপ করা সহজ।
CSS
.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}জাভাস্ক্রিপ্ট
function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }এইচটিএমএল
<element id='x' onclick="setSpecial(this.id)"> ... আরও একটি বিকল্প আছে। সিউডো-ক্লাসগুলি সরাসরি চালিত করার পরিবর্তে, "হোভার" শ্রেণি বা "দেখা" শ্রেণীর মতো একই জিনিসগুলির মডেল করে এমন বাস্তব ক্লাস তৈরি করুন। সাধারণ "" সাথে ক্লাসগুলি স্টাইল করুন। সিনট্যাক্স এবং তারপরে আপনি যথাযথ ইভেন্টে আগুন লাগলে উপাদান থেকে ক্লাস যুক্ত করতে বা মুছতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।
:beforeএবং :afterসিউডো উপাদান, ক্লাস নয়।
জাভাস্ক্রিপ্টের সাথে সরাসরি সিউডো-শ্রেণীর নিয়মগুলি সেট করার পরিবর্তে, আপনি বিভিন্ন সিএসএস ফাইলে বিধিগুলি আলাদাভাবে সেট করতে পারেন এবং তারপরে একটি স্টাইলশিটটি স্যুইচ করতে এবং অন্যটি স্যুইচ করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এ তালিকা অ্যাপার্টমেন্টে আরও একটি পদ্ধতি বর্ণনা করা হয়েছে (আরও তথ্যের জন্য qv।)
সিএসএস ফাইলগুলি সেট আপ করুন,
<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->এবং তারপরে জাভাস্ক্রিপ্ট ব্যবহার করে তাদের মধ্যে স্যুইচ করুন:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}যেমন ইতিমধ্যে বলা হয়েছে এটি ব্রাউজার সমর্থন করে এমন কিছু নয়।
যদি আপনি গতিশীলভাবে শৈলীগুলি না নিয়ে আসেন (যেমন কোনও ডাটাবেস বা কোনও কিছু থেকে এগুলি টেনে তোলা) আপনার পৃষ্ঠার শরীরে একটি শ্রেণি যুক্ত করে এটি ঘিরে কাজ করতে সক্ষম হওয়া উচিত।
CSS এর মতো দেখতে কিছুটা লাগবে:
a:hover { background: red; }
.theme1 a:hover { background: blue; }এবং জাভাস্ক্রিপ্ট এটিকে পরিবর্তন করার মতো কিছু হবে:
// Look up some good add/remove className code if you want to do this
// This is really simplified
document.body.className += " theme1"; element.classList.addভাল সমর্থন করা হয় না? আমি মানুষ করতে দেখছি element.className +=।
স্টাইলশিটগুলিকে স্যুইচ করা এবং আউট করা এটি করার উপায়। গতিশীল স্টাইলশিট তৈরি করার জন্য এখানে একটি লাইব্রেরি রয়েছে, যাতে আপনি ফ্লাইতে শৈলী সেট করতে পারেন:
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
এখানে দুটি ফাংশন সহ একটি সমাধান রয়েছে: addCSSclass ডকুমেন্টটিতে একটি নতুন CSS ক্লাস যুক্ত করে, এবং টগলক্লাস এটি চালু করে
উদাহরণটি একটি ডিভের সাথে একটি কাস্টম স্ক্রোলবার যুক্ত করে দেখায়
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null));
elem.className = elem.className.replace(matchRegExp, ''); // clear all
if (add) elem.className += ' ' + theClass;
}
function addCSSclass(rules) {
var style = document.createElement("style");
style.appendChild(document.createTextNode("")); // WebKit hack :(
document.head.appendChild(style);
var sheet = style.sheet;
rules.forEach((rule, index) => {
try {
if ("insertRule" in sheet) {
sheet.insertRule(rule.selector + "{" + rule.rule + "}", index);
} else if ("addRule" in sheet) {
sheet.addRule(rule.selector, rule.rule, index);
}
} catch (e) {
// firefox can break here
}
})
}
let div = document.getElementById('mydiv');
addCSSclass([{
selector: '.narrowScrollbar::-webkit-scrollbar',
rule: 'width: 5px'
},
{
selector: '.narrowScrollbar::-webkit-scrollbar-thumb',
rule: 'background-color:#808080;border-radius:100px'
}
]);
toggleClass(div, 'narrowScrollbar', true);<div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus
a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit
nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo
eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget
dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui.
</div>আপনি যদি REACT ব্যবহার করেন তবে রেডিয়াম নামে কিছু আছে । এটি এখানে এত দরকারী:
ইন্টারেক্টিভ স্টাইলগুলি নির্দিষ্ট করা থাকলে প্রপসগুলিতে হ্যান্ডলার যুক্ত করুন, উদাহরণস্বরূপ onMouseEnter এর জন্য: হোভার করুন, প্রয়োজনে বিদ্যমান হ্যান্ডলারের মোড়ানো
যদি কোনও হ্যান্ডলারের ট্রিগার হয়, যেমন ঘুরে বেড়ানোর মাধ্যমে, রেডিয়াম সেট স্টেটকে উপাদানগুলির স্টেট অবজেক্টে একটি রেডিয়াম-নির্দিষ্ট ক্ষেত্র আপডেট করতে কল করে
পুনঃ-রেন্ডারে, প্রয়োগ হওয়া কোনও ইন্টারেক্টিভ শৈলীর সমাধান করুন, উদাহরণস্বরূপ: রেডিয়াম-নির্দিষ্ট অবস্থায় উপাদানটির কী বা রেফটি অনুসন্ধান করে হোভার করুন