使用Javascript添加内联样式


91

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

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

创建动态的代码div

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

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


1
有什么区别?内联样式始终具有最高的特异性。
Amberlamps 2013年

因为div是动态创建的,所以我不能使用static,因为它是完整的Javascript库脚本
Curtis Crewe

也许这是一个XY问题。您想达到什么目的?是nFilter.style.width = '330px'; nFilter.style.float = 'left';你在找什么?
Amberlamps 2013年

Answers:


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

这应该向元素添加内联样式。


37

您可以直接在样式上进行操作:

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

6
不是CSS样式,而是带有setAttribute的第三个选项对我来说很完美。
milkersarac

16

使用jQuery:

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

除此以外 :

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

应该管用


6
在这种情况下,无需使用JQuery
Dharman 2013年

10
他提供了没有JQuery的替代解决方案。看不出需要否决票。
Termato 2015年

正确的要求的原始JS解决方案是替代解决方案?没人要的那个不涉及一个没人提到的图书馆吗?
Silvio Langereis


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

7

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

这样可以确保您可以连续向其添加样式,并且不会通过始终附加到当前样式来删除当前设置的任何样式。它还添加了一个额外的半冒号,因此,如果缺少一种样式,它将附加另一种样式以确保完全定界。


3

您应该制作一个CSS类,.my_style然后使用.addClass('.mystyle')


3

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




-1

创建类后,请使用CSS进行操作。.well {width:330px; 向左飘浮; }

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.