jQuery: ऑब्जेक्ट के साथ तत्व की 'शैली' विशेषता सेट करना

Question

मैंने इसे हमारे कोडबेस में दूसरे दिन देखा:

   link.attr('style', map({ 
       color: '#9a4d9e', 
       cursor: 'default' 
      })); 

map इस प्रकार परिभाषित किया गया है:

function map(map) { 
    var cssValue = []; 

    for (var o in map) { 
     cssValue.push(o + ':' + map[o] + ';') 
    } 

    return cssValue.join(';'); 
} 

map आवश्यक है? क्या ऐसा करने का कोई छोटा रास्ता है?

यह ध्यान रखना महत्वपूर्ण है कि "शैली" विशेषता "वर्ग" विशेषता में जोड़े गए/परिभाषित कक्षा द्वारा निर्धारित किसी भी शैलियों को ओवरराइड करती है।

Answer 1

शायद नहीं। एक बेहतर समाधान सीएसएस का उपयोग करने के हो सकते हैं:

link.css({color: '#9a4d9e', 
      cursor: 'default'}); 

हालांकि, .attr('style',) भी पिछले इनलाइन शैली निकाल देता है, तो यह बिल्कुल वैसा ही व्यवहार करते हैं नहीं है।
यदि आप attr का उपयोग करने जा रहे हैं, तो यह इनपुट स्ट्रिंग होना चाहिए, ऑब्जेक्ट नहीं, यह style विशेषता के साथ काम करने के लिए विशिष्ट नहीं है। उस मामले में एक विकल्प है:

link.attr('style', "color:'#9a4d9e';cursor:'default'"); 

इस मामले में क्लीनर लगता है। अन्य मामलों में, आपके map सीएसएस में चर डालने में आसान बनाता है।
map हालांकि बेहतर नाम दिया जा सकता था। यह भी एक कार्यान्वयन त्रुटि है - यह गुण के बीच डबल अर्धविराम जोड़ता है: color:red;;cursor:default;

एक सरल समाधान निकालने के लिए पूर्वावलोकन शैली css कॉल करने से पहले .removeAttr('style') कॉल करने के लिए है।

Answer 2

। तत्व के लिएaddClass ('हाइलाइट')। जहां आपकी सीएसएस कक्षा पूर्वनिर्धारित है। (यह मेरे लिए काम करता है क्योंकि यह 2 स्टाइल विशेषता परिवर्तन नहीं लेना चाहता था)