2013-02-07 75 views
48

我試圖將此代碼添加到動態創建的div元素添加內嵌樣式使用Javascript

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

的代碼中創建動態div

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

我的想法是添加< div class="well"之後的風格,但我不知道該怎麼做。

+0

它有什麼不同?內聯樣式將始終具有最高的特異性。 – Amberlamps

+0

因爲div是動態創建的,所以我不能使用靜態,因爲它是一個完整的Javascript庫腳本 –

+0

也許這是一個XY問題。你想達到什麼目的?是'nFilter.style.width ='330px'; nFilter.style.float ='左';'你在找什麼? – Amberlamps

回答

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

這應該爲元素添加內聯樣式。

1

你應該做一個CSS類.my_style然後使用.addClass('.mystyle')

0

現在你已經創建的類與CSS做吧。 .well { width:330px; float:left; }

7

使用jQuery:

$(nFilter).attr("style","whatever"); 

否則:

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

應該工作

+1

在這種情況下不需要使用JQuery – Dharman

+3

他給出了一個沒有JQuery的替代解決方案。沒有看到需要downvote。 – 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

不是CSS樣式,但setAttribute的第三個選項對我來說非常完美。 – milkersarac

0

使用cssText

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

如果你不想通過增加線的每個CSS屬性線,你可以做這樣的事情:

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;'); 

這可以確保你可以不斷補充樣式它,它不會刪除任何風格通常總是追加到當前樣式中。它還增加了一個額外的分號,以便如果有一種風格缺少一個,它會追加另一個以確保它完全分隔。