जावास्क्रिप्ट से सीएसएस छद्म श्रेणी के नियमों की स्थापना

Question

मैं जावास्क्रिप्ट से छद्म श्रेणी के चयनकर्ताओं (जैसे: लिंक,: होवर, आदि) के लिए सीएसएस नियमों को बदलने का एक तरीका ढूंढ रहा हूं।

तो सीएसएस कोड का एक एनालॉग: a:hover { color: red }जेएस में।

मुझे कहीं और जवाब नहीं मिला; अगर किसी को पता है कि यह कुछ ब्राउज़रों का समर्थन नहीं करता है, तो यह एक सहायक परिणाम भी होगा।

Answer 1

आप अकेले एक विशेष तत्व पर छद्म वर्ग की शैली नहीं कर सकते हैं, उसी तरह से आप एक इनलाइन शैली में छद्म वर्ग नहीं कर सकते हैं = "..." विशेषता (जैसा कि कोई चयनकर्ता नहीं है)।

आप इसे स्टाइलशीट में परिवर्तन करके कर सकते हैं, उदाहरण के लिए नियम जोड़कर:

#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';

IE, निश्चित रूप से, अपने स्वयं के वाक्यविन्यास की आवश्यकता है:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

पुराने और मामूली ब्राउज़रों को सिंटैक्स का समर्थन करने की संभावना नहीं है। डायनेमिक स्टाइलशीट-फ़िडलिंग शायद ही कभी किया जाता है क्योंकि यह सही पाने के लिए काफी कष्टप्रद है, शायद ही कभी जरूरत पड़ती है, और ऐतिहासिक रूप से परेशानी होती है।

Comments

इसे उत्तर के रूप में क्यों नहीं चुना गया?

— एसजेड

अधिक विशिष्ट संदर्भ URL: - < w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet > - < developer.mozilla.org/en/DOM/CSSStyleSheet/insertRule > - < developer.apple .com / पुस्तकालय / सफारी / # प्रलेखन /… >

फ़ायरफ़ॉक्स: "त्रुटि: ऑपरेशन असुरक्षित है।"

— 8128

यदि आप किसी भिन्न डोमेन से CSS फ़ाइल में हेरफेर करने का प्रयास कर रहे हैं (मुझे लगता है कि यह उसी प्रकार की मूल नीति का एक प्रकार है) तो @fluteflute संचालन असुरक्षित माना जाता है। शर्म की बात है! समान-मूल नीति के अनुरूप चेक करने का सरल कार्य: 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; }

— विकीनीलियम्स

शैलियों को किसी विशिष्ट तत्व पर लागू करने के लिए केवल स्टाइलशीट में हेरफेर करने की अनुशंसा नहीं की जाती है क्योंकि यह ब्राउज़र को पूरे दस्तावेज़ को रद्द करने का कारण बनता है क्योंकि स्टाइलशीट को बदल दिया जाता है। stubbornella.org/content/2009/03/27/…

— जोहान्स इवाल्ड

Answer 2

जेएस में स्टाइलशीट में हेरफेर के लिए वैध उपयोग के मामले हैं, मुझे लगता है कि मैंने इसके लिए एक छोटी सी लाइब्रेरी को एक साथ फेंक दिया । होने के कारण:

• उन शैलियों को सेट करना जिन्हें गणना या पुनर्प्राप्त किया जाना चाहिए - उदाहरण के लिए कुकी से उपयोगकर्ता का पसंदीदा फ़ॉन्ट-आकार सेट करना।
• व्यवहार (सौंदर्य नहीं) शैलियों की स्थापना, विशेष रूप से UI विजेट / प्लगइन डेवलपर्स के लिए। टैब्स, हिंडोला, आदि, अक्सर बस काम करने के लिए कुछ बुनियादी सीएसएस की आवश्यकता होती है - कोर फ़ंक्शन के लिए एक स्टाइलशीट की मांग नहीं करनी चाहिए ।
• इनलाइन स्टाइल से बेहतर है क्योंकि CSS नियम सभी वर्तमान और भविष्य के तत्वों पर लागू होते हैं, और फायरबग / डेवलपर टूल्स में देखने पर HTML को अव्यवस्थित नहीं करते हैं।

Answer 3

क्रॉस-ब्राउज़र सामान के साथ सामना करने के लिए एक समारोह:

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

Answer 4

बस टेम्पलेट स्ट्रिंग में सीएसएस रखें।

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

फिर एक स्टाइल एलिमेंट बनाएं और स्ट्रिंग को स्टाइल टैग में रखें और इसे दस्तावेज़ में संलग्न करें।

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

विशिष्टता बाकी का ख्याल रखेगी। फिर आप स्टाइल टैग को गतिशील रूप से हटा और जोड़ सकते हैं। यह पुस्तकालयों के लिए एक सरल विकल्प है और DOM में स्टाइलशीट सरणी के साथ खिलवाड़ है। हैप्पी कोडिंग!

Comments

insertAdjacentElementप्रमुख ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, एज) में 2 तर्कों की आवश्यकता होती है, जिनमें से पहला संदर्भ तत्व के सापेक्ष स्थिति स्थापित करता है ( यहां देखें )। क्या यह हालिया बदलाव है? (उत्तर देने से पहले 'जोड़ा')।

— Collapsar

Answer 5

मेरी चाल एक विशेषता चयनकर्ता का उपयोग कर रही है। विशेषताएँ जावास्क्रिप्ट द्वारा स्थापित करना आसान है।

सीएसएस

.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)"> ...  

Comments

यह समाधान jQuery का उपयोग करता है - एक निर्भरता का परिचय jQuery के आकार के रूप में कुछ के लिए सरल है, जब प्रश्नकर्ता ने शुद्ध जावास्क्रिप्ट के लिए पूछा, खराब है।

— टॉम ऐशवर्थ

हालांकि व्यावहारिक रूप से आजकल सभी वेबसाइटें USE jquery, मैं इसे शुद्ध जावास्क्रिप्ट का उपयोग करने के लिए संशोधित कर दूंगी।

— सर्जियो अब्रेउ

और वास्तव में इस विधि को .class [विशेष] के सीएसएस विशेषताओं को बदलने के लिए कैसे मिलता है: छद्म तत्व के बाद, जैसे, पृष्ठभूमि का रंग या कुछ और?

— andreszs

Answer 6

एक और विकल्प है। सीधे छद्म वर्गों में हेरफेर करने के बजाय, वास्तविक कक्षाएं बनाएं जो समान चीजों को मॉडल करती हैं, जैसे "होवर" वर्ग या "विज़िट किया गया" वर्ग। कक्षाओं को हमेशा की तरह स्टाइल करें "।" वाक्यविन्यास और फिर आप उपयुक्त घटना की आग लगने पर किसी तत्व से कक्षाएं जोड़ने या हटाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

Comments

इससे पहले कि और: छद्म वर्गों के बाद काम नहीं करता है।

— 23

और यह AJAX के माध्यम से प्राप्त मान के साथ पृष्ठभूमि छवि को बदलने के लिए लागू नहीं है।

— andreszs

@jbyrd, :beforeऔर :afterछद्म तत्व हैं, वर्ग नहीं।

— रॉय लिंग

@ ट्रोलिंग - हाँ, सुधार के लिए धन्यवाद! मेरी टिप्पणी को संपादित करने के लिए प्रतीत नहीं हो सकता।

— 23

Answer 7

जावास्क्रिप्ट के साथ सीधे छद्म श्रेणी के नियमों को सेट करने के बजाय, आप अलग-अलग CSS फाइलों में नियमों को अलग-अलग तरीके से सेट कर सकते हैं, और फिर जावास्क्रिप्ट का उपयोग करके एक स्टाइलशीट को बंद कर सकते हैं और दूसरे को स्विच कर सकते हैं। ए लिस्ट के अलावा एक विधि बताई गई है (qv। अधिक विवरण के लिए)।

CSS फाइलों को इस प्रकार सेट करें,

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

Comments

क्या होगा अगर आपको AJAX अनुरोध द्वारा प्राप्त मान को श्रेणी में परिवर्तित करने की आवश्यकता है? अब आप CSS फ़ाइल नहीं बना सकते ...

— andreszs

Answer 8

जैसा कि पहले ही कहा गया है कि यह कुछ ऐसा नहीं है जो ब्राउज़र समर्थन करता है।

यदि आप गतिशील रूप से शैलियों के साथ नहीं आ रहे हैं (यानी उन्हें डेटाबेस या किसी चीज़ से बाहर खींच रहे हैं) तो आपको पृष्ठ के मुख्य भाग में एक वर्ग जोड़कर इसके चारों ओर काम करने में सक्षम होना चाहिए।

सीएसएस कुछ इस तरह दिखेगा:

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

Comments

जिज्ञासा से बाहर, element.classList.addअच्छी तरह से समर्थित नहीं है? मैं लोगों को करते देखता हूं element.className +=।

— जोएल कॉर्नेट

classList एक नई सुविधा है और ऐसा नहीं लगता है कि इसे हाल ही में अच्छा समर्थन मिलने तक ( caniuse.com/classlist देखें )

— Nathaniel Reinhart

Answer 9

स्टाइलशीट्स को अंदर और बाहर स्विच करना इसका तरीका है। यहाँ गतिशील रूप से स्टाइलशीट बनाने के लिए एक पुस्तकालय है, जिससे आप फ़्लाई पर शैलियाँ सेट कर सकते हैं:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Answer 10

Jquery में आप आसानी से मंडराने वाले छद्म वर्गों को सेट कर सकते हैं।

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

Answer 11

यहाँ दो कार्यों सहित एक समाधान है: addCSSclass दस्तावेज़ में एक नया css वर्ग जोड़ता है, और toggleClass इसे चालू करता है

उदाहरण एक div में एक कस्टम स्क्रॉलबार जोड़ने से पता चलता है

// 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>

Answer 12

यदि आप REACT का उपयोग करते हैं, तो रेडियम नाम की कोई चीज होती है । यह यहाँ बहुत उपयोगी है:

• यदि संवादात्मक शैली निर्दिष्ट की जाती है तो प्रॉप्स में हैंडलर जोड़ें, उदाहरण के लिए onMouseEnter: होवर, यदि आवश्यक हो तो मौजूदा हैंडलर को लपेटना

• यदि किसी भी हैंडलर को ट्रिगर किया जाता है, उदाहरण के लिए, रेडियम कॉल करता है, तो रेडियम-विशिष्ट फ़ील्ड को घटक राज्य ऑब्जेक्ट पर अपडेट करने के लिए रेडियम कॉल सेट करता है

• फिर से प्रस्तुत करने पर, लागू होने वाली किसी भी इंटरेक्टिव शैली को हल करें, जैसे: होवर, मूल-तत्व की स्थिति को देखते हुए या रेडियम-विशिष्ट स्थिति में रेफ द्वारा।