Question

我正在尝试将此代码添加到动态创建的div元素

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

创建动态div的代码是

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

应该有效

Answer 4

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 5

你可以试试这个

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

那应该为你做。

Answer 6

有些人有一个使用我喜欢的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;');

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

Answer 7

你应该创建一个css类.my_style然后使用.addClass('.mystyle')

Answer 8

如果您不想逐行添加每个css属性，可以执行以下操作：

＆＃13;

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

＆＃13;

Answer 9

现在你已经创建了这个类，用css做。。好 { 宽度：330px; 向左飘浮; }

Answer 10

使用cssText

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

Answer 11

尝试这样的事情

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

使用Javascript添加内联样式

11 个答案: