जावास्क्रिप्ट में सीएसएस संपत्ति सेट करें?

161

मैंने निम्नलिखित बनाया है ...

var menu = document.createElement('select');

अब मैं CSS विशेषताओं को कैसे सेट करूँगा width: 100px?

javascript css

— Skizit
स्रोत

252

उपयोग करें element.style:

var element = document.createElement('select');
element.style.width = "100px";

— KJYe.Name N
स्रोत

14

जैसे अनौपचारिक लोगों के लिए क्या है -webkit-background-size? क्या सादे js के साथ इन्हें सेट करने का कोई तरीका है या क्या हमें jQuery का उपयोग करना है?

— ल्यूक

60

@Luke obj.style ["- वेबकिट-पृष्ठभूमि-आकार"] = "400px"

— डैनियल एक्स मूर

यह वास्तव में तत्व में तत्व को स्टाइल करता है न कि स्टाइलशीट में।

— आफ्टर

56

बस सेट करें style:

var menu = document.createElement("select");
menu.style.width = "100px";

या यदि आप चाहें, तो आप jQuery का उपयोग कर सकते हैं :

$(menu).css("width", "100px");

— djdd87
स्रोत

5

@ मोबाइल - मेरे उद्धरण असंगत नहीं हैं। मैं हमेशा जेएस के लिए दोहरे उद्धरण चिह्नों का उपयोग करता हूं क्योंकि यह काम में मानक है। वैसे भी, पहली पंक्ति में एकल उद्धरण थे क्योंकि मैंने इसे ओपीएस प्रश्न से कॉपी किया था। वैसे भी अब ठीक हो गया।

— djdd87

1

ठीक है, वे अब ठीक हैं, लेकिन वे मेरी टिप्पणी के समय असंगत थे:)

— OK टाइम विद

2

@ मोबाइल - मैंने एक प्रकार की पच्चीकारी की: "वैसे भी, पहली पंक्ति में सिंगल कोट्स थे क्योंकि मैंने इसे ओपीएस प्रश्न से कॉपी किया था। अब वैसे भी सही किया गया है।"

— djdd87

35

अधिकांश शैलियों के लिए यह करें:

var obj = document.createElement('select');
obj.style.width= "100px";

उन शैलियों के लिए जिनके नाम में हाइफ़न हैं, इसके बजाय यह करें:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

— डैनियल एक्स मूर
स्रोत

17

यह वास्तव में वेनिला जावास्क्रिप्ट के साथ काफी सरल है:

menu.style.width = "100px";

— जस्टिन नेसनेर
स्रोत

14

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

कल्पना करें कि क्या आपको साइट को फिर से स्टाइल करने के लिए एक डिजाइनर मिला है ... वे आपके जावास्क्रिप्ट के साथ काम किए बिना सीएसएस में विशुद्ध रूप से काम करने में सक्षम होना चाहिए।

प्रोटोटाइप में मैं करूँगा:

$(newElement).addClassName('blah')

— छेद
स्रोत

1

+1 मुझसे - अपने सभी CSS को अलग रखने के लिए बहुत आसान / क्लीनर।

— इयान ऑक्सले

1

संदर्भ के लिए इसका jQuery संस्करण ...$(selector).addClass('blah')

— zgr024

8

सिर्फ उन लोगों के लिए जो 2018 में यही काम करना चाहते हैं

आप अपने तत्व (CSS या JS के माध्यम से) में सीएसएस कस्टम संपत्ति असाइन कर सकते हैं और इसे बदल सकते हैं:

सीएसएस के माध्यम से संपत्ति:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

जेएस के माध्यम से असाइनमेंट

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

जेएस के माध्यम से संपत्ति मूल्य प्राप्त करें

ELEMENT.style.getPropertyValue('--element-width');

यहां उपयोगी लिंक:

— मटिया एस्टोरिनो
स्रोत

6

डिबगिंग करते समय, मुझे एक पंक्ति में सीएसएस विशेषताओं का एक गुच्छा जोड़ने में सक्षम होना पसंद है:

menu.style.cssText = 'width: 100px';

इस शैली का उपयोग करने से आप एक पंक्ति में सीएसएस का एक गुच्छा जोड़ सकते हैं जैसे:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

— एक कल्पित कहानी
स्रोत

5

यदि आप एक वैश्विक संपत्ति जोड़ना चाहते हैं, तो आप उपयोग कर सकते हैं:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— Hetdev
स्रोत

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— मोहसिन खान
स्रोत

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— मोहसिन खान
स्रोत

1

यह सबसे सीएसएस गुणों के साथ अच्छी तरह से काम करता है अगर उनमें कोई हाइफ़न नहीं हैं।

var element = document.createElement('select');
element.style.width = "100px";

की तरह उन में हाइफ़न के साथ प्रॉपर्टी के लिए max-width, आप परिवर्तित करना चाहिए sausage-caseकरने के लिएcamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

— Daut
स्रोत

0

यह समझना महत्वपूर्ण है कि कोड बाइल स्टाइलशीट को नहीं बदलता है, बल्कि इसके बजाय DOM को बदलता है:

document.getElementById("p2").style.color = "blue";

DOM, स्टाइलशीट एलिमेंट प्रॉपर्टीज़ का एक परिकलित वैल्यू स्टोर करता है, और जब आप डायनामिक रूप से Javascript का उपयोग करके एलीमेंट स्टाइल को बदलते हैं तो आप DOM को बदल रहे होते हैं। यह नोट करना महत्वपूर्ण है, और यह समझना क्योंकि आपके कोड को लिखने का तरीका आपकी गतिशीलता को प्रभावित कर सकता है। यदि आप उन मूल्यों को प्राप्त करने की कोशिश करते हैं जो सीधे तत्व में ही नहीं लिखे गए थे, तो जैसे ...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... आप एक अपरिभाषित मान लौटाएंगे जो कोड उदाहरण 'प्रॉपर्टीव्यू' चर में संग्रहीत किया जाएगा। यदि आप ऐसी संपत्तियाँ प्राप्त करने और स्थापित करने के साथ काम कर रहे हैं जो सीएसएस स्टाइल-शीट के अंदर लिखी गई थीं और आप एक सिंघल फ़ंक्शंस चाहते हैं , साथ ही इस स्थिति में स्टाइल-प्रॉपर्टी-वैल्यूज़ भी सेट करते हैं, जो कि एक बहुत ही सामान्य स्थिति है। तो आप JQuery का उपयोग करने के लिए मिल गया है।

$(selector).css(property,value)

केवल नकारात्मक पक्ष आपको JQuery के बारे में पता चला है, लेकिन यह ईमानदारी से बहुत से अच्छे कारणों में से एक है जो प्रत्येक जावास्क्रिप्ट डेवलपर को JQuery सीखना चाहिए। यदि आप एक CSS संपत्ति प्राप्त करना चाहते हैं जो शुद्ध जावास्क्रिप्ट में एक स्टाइल-शीट से गणना की गई थी, तो आपको उपयोग करने की आवश्यकता है।

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

इस पद्धति का नकारात्मक पक्ष यह है कि getComputedValue विधि केवल मिलती है, यह सेट नहीं होती है। मोजिला का कम्प्यूटेड वैल्यूज पर ले लो यह लिंक मेरे द्वारा यहां संबोधित किए जाने के बारे में अधिक गहराई में जाता है। आशा है कि यह किसी की मदद करता है !!!

— Aft3rL1f3
स्रोत

मुझे लगता है कि आपका पहला कोड ब्लॉक सामग्री गायब है?

— zb226

1

वहां इसका नियत समय

— Aft3rL1f3