element.style.setAttribute() बनाम element.attribute = ''

Question

जावास्क्रिप्ट में

element.style.setAttribute('width', '150px'); 

और

element.style.width = '150px'; 

का उपयोग कर के बीच कोई अंतर है?

मैंने देखा है कि कीवर्ड पहले तरीके से काम नहीं करेंगे (जैसे this), लेकिन गैर-कीवर्ड विशेषताओं के लिए कोई अंतर है?

Answer 1

दोनों पूरी तरह से मान्य हैं। क्या आप कुछ उदाहरण दे सकते हैं जो दूसरे तरीके से काम नहीं करते हैं? क्या आप जानते हैं कि विशेषता नाम पहले camelcased होना चाहिए? जैसे element.style.marginTop गलत तरीके से element.style.margin-top के बजाय। हाइफ़न जावास्क्रिप्ट में एक अवैध पहचानकर्ता है।

Answer 2

मैंने जो एकमात्र परिवर्तन देखा है वह कैनवास के साथ है। लेकिन, फिर, एक तत्व दिए गए क्या

element.width = '100px' 
element.style.width = '100px' 
element.setAttribute('width','100px') 
element.style.setAttribute('width','100px') 

के बीच अंतर के बाद से मैं एक विशेषज्ञ से इस सवाल का जवाब नहीं मिला है, केवल अनुभव से मैं यह कहना होगा।

चौड़ाई तत्व की एक उजागर संपत्ति है, जैसा कि किसी ऑब्जेक्ट में car.color = 'red'; setAttribute('color','red'), शैली एक विशेष मामला है, जहां का कहना है की सुविधा देता है, एक समारोह जो car = {color:'red',setAttribue:function(prop,val){this[prop]=val;} एक समारोह प्रोटोटाइप के रूप में देखा में के रूप में एक संपत्ति के लिए मूल्य प्रदान करती है

function element(){ 
    this.color='blue' // default 
    this.setAttribute = function(prop, val){ this[prop]=val;} 
} 
car = new element() 

car.color = 'red'; 
or 
car.setAttribute('color','red'); 

होगा अब है कि कैसे चीजों को एक में प्रदर्शित किए जाते है रूपांतरित तरीका, इसकी मूल नहीं है। एक शैली संपत्ति को स्वयं नहीं बदलेगी और यह प्रभाव है जो आप अब कैनवास में देखते हैं, क्योंकि यह छवियों में पहले था जो चौड़ाई ऊंचाई मान

वह कैसा है? कल्पना करें कि आपके पास 100x100 पिक्सेल मूल का आंकड़ा है, आकृति टैग में ऊंचाई चौड़ाई 100x100px, (कैनवास के साथ एक ही मामला) के लिए सेटिंग होगी, तो शैली के अनुसार आप चौड़ाई की ऊंचाई 200x200px बदलते हैं, वही छवि फिट करने के लिए बढ़ेगी नए आकार, परिलक्षित किया जाएगा, लेकिन छवि को ही 100x100

ठीक स्टिल्स, आप परीक्षण कर सकते हैं इस ताकि आप स्पष्टीकरण

साथ आरामदायक हो एक छवि

<image id='f' src='whateveritis' width=100 height=100> 

है यह देखते हैं? 100x100 पिक्सल है

अब एक शैली

style='width:200px' 

<image id='f' style='width:200px' src='whateveritis' width=100 height=100> 

यह देखें जोड़ सकता हूँ?अब यह

और बढता है अब उसके गुण

f = document.getElementById('f'); 

alert(f.width) // you get 200px 

alert(f.getAttribute('width')) // you get 100px 

तो छवियों के साथ काम करने को याद मिल, कैनवास एक सब, शैलियों में नहीं आधार आकार करते हैं, लेकिन गुण

एक div का डिफ़ॉल्ट आकार या में जो कुछ भी शून्य

तो आप शैलियों से इसका आकार निर्धारित कर सकते हैं, लेकिन वास्तव में आकार 0x0px

रहने लेकिन समय के कार्यक्रमों की सबसे काम करेगा विशेषता मानों के आधार पर, शैलियों के मूल्यों में नहीं।

और, वहाँ एक और उपाय है, लेकिन अपना होमवर्क

तो क्या f.scroolWidth, और f.scrollHeight है अगर यह चौड़ाई और ऊंचाई (जब निश्चित रूप से स्क्रॉल नहीं) के रूप में ही है किया जाएगा। जब मैं कार के साथ उदाहरण किया

एक अंतिम बिंदु भी खाते में रखना, यह तत्वों के साथ अलग है के बाद से संपत्ति रंग शैलियों यह वह जगह है करने के लिए छिपा हुआ लेकिन उस तक पहुंच जाता है, एक तत्व की ही वास्तविक संपत्ति है एक तुम लिखो HTML टैग कोड या एक आप setAttribute के साथ सेट क्योंकि भले ही आप

element.width संशोधित में प्रत्यक्ष एक शैली है विशेषता ही

तो एक ही रास्ता वास्तव में अपने मूल्य को बदलने के लिए नहीं

होगा

element.setAttribute ('चौड़ाई', एक्स)

मैं इस अपने आप को पढ़ा है और एक और सवाल आप हो सकता है आप सोच सकते हैं पाया, मैं 100x100 के साथ HTML टैग छोड़ दिया और यही वजह है कि मैं चेतावनी पाने के 100 के बजाय 200

खैर के साथ, नहीं ऐसा नहीं है

आप उस के लिए भी परीक्षण कर सकते हैं, टैग में परिवर्तन नहीं करते, क्योंकि यह एक f.setAttribute है

आदेश ('चौड़ाई', ' 300 ');

तो

alert(f.width) // you get 200px 

alert(f.getAttribute('width')) // you get 300px 

JQuery में

एक ही है, विशेषता को बदलने के लिए केवल आदेश $()। Attr

$()। Widht और $() है। सीएसएस सिर्फ शैली बदलने

अंत में

क्या यह महत्वपूर्ण है?

हाँ, यह है, क्योंकि यहां तक ​​कि छवियों और गुण नहीं शैली, जिनमें दृश्य प्रभाव लेता है के साथ कैनवास काम के लिए जब शैली है नहीं विशेषता यह आपको 200x200 से मूल आकार सेट कर सकते हैं और यह 200x200 होगा, लेकिन यदि आप स्टाइल द्वारा 300x300 में बदलते हैं तो छवि 300 होगी, इससे कोई फर्क नहीं पड़ता कि आप अपनी विशेषता 1000x1000 पर सेट करते हैं, फिर भी छवि 300x300 के रूप में देखी जाएगी लेकिन उदाहरण के लिए, कैनवास प्रोग्राम के लिए जिस छवि पर यह काम कर रहा है वह 1000x1000 आकार है।