2013-02-07 5 views
48

मैं जिसमें बनाता गतिशील divजावास्क्रिप्ट

var nFilter = document.createElement('div'); 
nFilter.className = 'well'; 
nFilter.innerHTML = '<label>' + sSearchStr + '</label>'; 

मेरा विचार जोड़ने के लिए है

style = "width:330px;float:left;" 

कोड एक डायनामिक रूप से तैयार div तत्व के लिए इस कोड जोड़ने का प्रयास कर रहा हूँ का उपयोग कर इनलाइन शैली जोड़ें < div class="well" के बाद शैली लेकिन मुझे नहीं पता कि मैं इसे कैसे करूँगा।

+0

इससे क्या फर्क पड़ता है? इनलाइन शैली में हमेशा उच्चतम विशिष्टता होगी। – Amberlamps

+0

क्योंकि div गतिशील रूप से बनाया गया है, मैं स्थिर का उपयोग नहीं कर सकता क्योंकि यह एक पूर्ण जावास्क्रिप्ट लाइब्रेरी स्क्रिप्ट –

+0

हो सकता है शायद यह एक XY समस्या है। आप क्या हासिल करने का प्रयास कर रहे हैं? 'NFilter.style.width = '330px' है; nFilter.style.float = 'left'; 'आप क्या खोज रहे हैं? – Amberlamps

उत्तर

70
nFilter.style.width='330px'; 
nFilter.style.float='left'; 

यह तत्व में एक इनलाइन शैली जोड़ना चाहिए।

1

आप बनाना चाहिए एक सीएसएस वर्ग .my_style तो का उपयोग .addClass('.mystyle')

0

अब है कि आप वर्ग बना लिया है सीएसएस के साथ यह मत करो। .well { चौड़ाई: 330 पीएक्स; फ्लोट: बाएं; }

7

jQuery का उपयोग करना:

$(nFilter).attr("style","whatever"); 
अन्यथा

:

nFilter.setAttribute("style", "whatever"); 

काम करना चाहिए

+1

इस मामले में JQuery का उपयोग करना अनावश्यक है – Dharman

+3

वह JQuery के बिना वैकल्पिक समाधान देता है। डाउनवोट की आवश्यकता को न देखें। – Termato

20

आप शैली पर सीधे यह कर सकते हैं:

var nFilter = document.createElement('div'); 
nFilter.className = 'well'; 
nFilter.innerHTML = '<label>'+sSearchStr+'</label>'; 

// Css styling 
nFilter.style.width = "330px"; 
nFilter.style.float = "left"; 

// or 
nFilter.setAttribute("style", "width:330px;float:left;"); 
+2

सीएसएस स्टाइल नहीं है लेकिन setAttribute के साथ तीसरा विकल्प मेरे लिए सही काम करता है। – milkersarac

0

उपयोग +०१२३२७७७९११

nFilter.style.cssText +=';width:330px;float:left;'; 
6
var div = document.createElement('div'); 
div.setAttribute('style', 'width:330px; float:left'); 
div.setAttribute('class', 'well'); 
var label = document.createElement('label'); 
label.innerHTML = 'YOUR TEXT HERE'; 
div.appendChild(label); 
6

आप इस

nFilter.style.cssText = 'width:330px;float:left;'; 

कि यह आप के लिए क्या करना चाहिए के साथ की कोशिश कर सकते हैं। इस तरह

+0

'CSSRule' लागू होने तक काम नहीं करेगा। – Praveen

0

कोशिश कुछ

document.getElementById("vid-holder").style.width=300 + "px"; 
0

आप लाइन द्वारा प्रत्येक सीएसएस संपत्ति पंक्ति जोड़ने के लिए नहीं करना चाहते हैं, तो आप कुछ इस तरह कर सकते हैं:

document.body.insertAdjacentHTML('afterbegin','<div id="div"></div>'); 
 

 
/** 
 
* Add styles to DOM element 
 
* @element DOM element 
 
* @styles object with css styles 
 
*/ 
 
function addStyles(element,styles){ 
 
    for(id in styles){ 
 
    element.style[id] = styles[id]; 
 
    } 
 
} 
 

 
// usage 
 
var nFilter = document.getElementById('div'); 
 
var styles = { 
 
    color: "red" 
 
    ,width: "100px" 
 
    ,height: "100px" 
 
    ,display: "block" 
 
    ,border: "1px solid blue" 
 
} 
 
addStyles(nFilter,styles);

0

कुछ लोगों के पास setAttribute का उपयोग करके एक उदाहरण है जो मुझे पसंद है। हालांकि यह मानता है कि आपके पास वर्तमान में कोई शैलियों सेट नहीं है। मैं शायद कुछ ऐसा करना होगा:

nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;'); 

या यह इस तरह एक सहायक समारोह में बनाना:

function setStyle(el, css){ 
    el.setAttribute('style', el.getAttribute('style') + ';' + css); 
} 

setStyle(nFilter, 'width:330px;float:left;'); 

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

संबंधित मुद्दे