मेरे पास यह चयनकर्ता सीएसएस में .square वर्ग के लिए है

.square:not(:hover){
}

और मैं जावास्क्रिप्ट के माध्यम से इसमें कस्टम गुण जोड़ना चाहता हूं।

मैंने ऐसा करने की कोशिश की लेकिन यह काम नहीं किया।

document.querySelectorAll('.square:not(:hover)').forEach((item) => {
  item.style.transition = `background ${animation_delay}s`;
});

क्या वेनिलाजेएस के साथ ऐसा करने का कोई तरीका है?

1
meabefir 28 मार्च 2020, 23:04
अभी-अभी Chrome में परीक्षण किया गया-- ठीक काम कर रहा है: jsfiddle.net/anied/mn8azh3v/4
 – 
Alexander Nied
28 मार्च 2020, 23:21

2 जवाब

जिस तरह से आप <style> टैग को एक्सेस/संशोधित कर सकते हैं, वह इस प्रकार है:

// suggest you add an id to your style tag
var style = document.querySelector('style');

var var sheet = style.sheet; // <-- CSSStyleSheet

var rules = sheet.rules; // <-- CSSRuleList

// keep the number of rules small/ordered 
// in the sheet you want to mutate, so you can 
// find them easily
rules[0].selectorText
// > selectorText: ".wmd-snippet-button span"

rules[0].style.backgroundColor
// > ""

rules[0].style.backgroundColor = 'black'
// > "black" // <-- (and see the change in the page!)

एमडीएन पर अधिक जानकारी देखें CSSStyleSheet और CSSRuleList पृष्ठ।

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

1
David784 28 मार्च 2020, 23:24

document.querySelectorAll('.square:not(:hover)') को नोड्स की सूची वापस करनी चाहिए। वाक्य रचना में कुछ भी गलत नहीं है।

क्रोम देव टूल्स का उपयोग करके, पहले सत्यापित करें कि .square:not(:hover) DOM में मौजूद है या नहीं।

1
Faraaz Malak 28 मार्च 2020, 23:48