使用Javascript添加内联样式

我试图将这个代码添加到一个dynamic创build的div元素

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

创builddynamicdiv的代码是

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

我的想法是在< div class="well"之后添加样式，但是我不知道该怎么做。

Answer 1

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

这应该添加一个内联样式的元素。

Answer 2

你可以直接在风格上做到这一点：

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

Answer 3

使用jQuery：

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

除此以外 ：

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

应该pipe用

Answer 4

你可以试试这个

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

这应该为你做。

Answer 5

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

Answer 6

你应该做一个CSS类.my_style然后使用.addClass('.mystyle')

Answer 7

现在用css来创build这个类。 .well {width：330px; 向左飘浮; }

Answer 8

使用cssText

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

Answer 9

尝试这样的事情

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

Answer 10

如果你不想逐行添加每个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); 

Answer 11

有一些人使用我喜欢的setAttribute的例子。 但是，它假定您没有任何当前设置的样式。 我也许会做这样的事情：

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

或者把它变成这样的帮手function：

 function setStyle(el, css){ el.setAttribute('style', el.getAttribute('style') + ';' + css); } setStyle(nFilter, 'width:330px;float:left;'); 

这可以确保您可以连续添加样式，并且不会通过总是附加到当前样式来删除当前设置的任何样式。 它还增加了一个额外的分号，所以如果有一个样式失踪，它会追加另一个，以确保它完全分隔。