जावास्क्रिप्ट का उपयोग करते हुए तत्व शैली की विशेषता को गतिशील रूप से बदलना

Question

मैं एक डिव के लिए एक निश्चित स्टाइल शीट हवलदार हूं। अब मैं js का उपयोग करके div की एक विशेषता को संशोधित करना चाहता हूं।

मैं यह कैसे कर सकता हूं?

document.getElementById("xyz").style.padding-top = "10px";

क्या ये सही है?

Answer 1

यह लगभग सही है।

चूंकि -एक जावास्क्रिप्ट ऑपरेटर है, आप वास्तव में संपत्ति के नामों में नहीं हो सकते। यदि आप सेट कर रहे थे, borderया इसके बजाय कुछ एकल-शब्द जैसा था, तो आपका कोड ठीक काम करेगा।

हालाँकि, आपको जिस चीज़ के लिए याद रखने की ज़रूरत है padding-top, और किसी भी हाइफ़नेटेड विशेषता नाम के लिए, यह है कि जावास्क्रिप्ट में, आप हाइफ़न को हटा दें, और अगले अक्षर को अपरकेस बना दें, ताकि आपके मामले में ऐसा हो paddingTop।

कुछ और अपवाद हैं। floatउदाहरण के लिए, जावास्क्रिप्ट में कुछ आरक्षित शब्द हैं, इसलिए आप ऐसा नहीं कर सकते । इसके बजाय, कुछ ब्राउज़रों में आपको cssFloatऔर दूसरों में उपयोग करने की आवश्यकता है styleFloat। यह इस तरह की विसंगतियों के लिए है कि यह अनुशंसा की जाती है कि आप एक फ्रेमवर्क जैसे कि jQuery का उपयोग करें, जो आपके लिए ब्राउज़र असंगतताओं को संभालता है ...

Answer 2

अन्य उत्तरों के अलावा, यदि आप शैली गुणों के लिए डैश नोटिफ़िकेशन का उपयोग करना चाहते हैं, तो आप भी उपयोग कर सकते हैं:

document.getElementById("xyz").style["padding-top"] = "10px";

Comments

मुझे न तो, यह वास्तव में गतिशील कार्यों के लिए उपयोगी है, कोई स्टाइल को स्ट्रिंग मान के रूप में पारित कर सकता है, फिर शैली और मूल्य सेट कर सकता है। महान समाधान।

— रफ़ी

साथ ही @raphie जो कहती है उसे जोड़कर आप भी इस्तेमाल कर सकते हैं document.getElementById("xyz").style["paddingTop"] = '10px'।

— टूथब्रश 20

@anunkjn: तुम सही हो। मैं कहूंगा कि यह एफएफ में अब और काम नहीं करता है । जो है, अच्छा है ... अजीब है।

— KooiInc

Answer 3

मैं इसी तरह की समस्या को हल करता हूं:

document.getElementById("xyz").style.padding = "10px 0 0 0";

उम्मीद है की वो मदद करदे।

Comments

इस तरह से करने का अर्थ यह है कि आपको अन्य पक्षों के लिए पेडिंग मिल जाती है 0। और कभी-कभी आप ऐसा नहीं चाहते हैं।

— गुस्तावो स्ट्राबे

Answer 4

style.setPropertyसमारोह भी है:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Answer 5

मान लें कि आपके पास HTML इस तरह है:

<div id='thediv'></div>

यदि आप इस div की शैली विशेषता को संशोधित करना चाहते हैं, तो आप उपयोग करेंगे

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

[ATTRIBUTE]इच्छित शैली विशेषता के साथ बदलें । याद रखें कि '-' को हटा दें और निम्न अक्षर को बड़ा करें।

उदाहरण

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

Comments

जैसा कि स्वीकृत उत्तर में कहा गया है, कुछ अपवाद हैं। की तरह float।

— गुस्तावो स्ट्राबे

Answer 6

document.getElementById("xyz").style.padding-top = '10px';

होगा

document.getElementById("xyz").style["paddingTop"] = '10px';

Answer 7

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

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

बेहतर अभी भी आप शैलियों को एक चर में संग्रहीत कर सकते हैं, जो बहुत आसान संपत्ति प्रबंधन के लिए बना देगा

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

उम्मीद है की वो मदद करदे

Answer 8

हैरानी की बात है कि मैं नीचे क्वेरी चयनकर्ता रास्ता समाधान नहीं देखा ,

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration समाधान, स्वीकृत उत्तर का एक उदाहरण है

document.getElementById('xyz').style.paddingTop = "10px";

Answer 9

document.getElementById("xyz").setAttribute('style','padding-top:10px');

नौकरी भी करेगा।

Comments

इस तरह से करने का नकारात्मक पक्ष यह है कि आपको किसी अन्य इनलाइन शैली को हटा दिया जाता है। ऐसा इसलिए है क्योंकि आप संपूर्ण विशेषता मान बदल रहे हैं। मुझे लगता है कि वर्तमान शैली प्राप्त करना, जिस संपत्ति को आप सेट करना चाहते हैं, उसके लिए मौजूदा मूल्य की जांच करना, और फिर वांछित मूल्य से जोड़ना / प्रतिस्थापित करना एक बेहतर समाधान है।

— गुस्तावो स्ट्राबे

माना। लेकिन ओपी को एक समाधान की आवश्यकता थी जो वह पहले से ही कर रहा था जो आपके उपयोग के मामले को ध्यान में नहीं ले रहा था। इसे प्राप्त करने के सबसे सरल तरीकों में से एक है, लेकिन यह निश्चित रूप से सबसे अच्छा नहीं है।

— पिंकेश बडज़ात्या

@GustavoStraube, मैं इसे नकारात्मक पक्ष नहीं कहूंगा। कई मामलों में यह वही है जो डेवलपर करना चाहता है - यानी तत्व की शैली को अधिलेखित करना। मैं इसे इस तरह से करने का परिणाम कहूंगा।

— stwr667

Answer 10

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

मेरे लिये कार्य करता है