使用 Javascript 添加内联样式答案

【问题标题】：Add inline style using Javascript使用 Javascript 添加内联样式
【发布时间】：2013-01-23 01:44:18
【问题描述】：

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

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

创建动态div的代码是

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

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

【问题讨论】：

它有什么不同？内联样式将始终具有最高的特异性。
因为 div 是动态创建的，所以我不能使用 static，因为它是一个完整的 Javascript 库脚本
也许这是一个 XY 问题。你想达到什么目的？ nFilter.style.width = '330px'; nFilter.style.float = 'left'; 是你要找的吗？

标签： javascript css innerhtml

【解决方案1】：

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

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

【讨论】：

【解决方案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;");

【讨论】：

不是 CSS 样式，而是 setAttribute 的第三个选项非常适合我。

【解决方案3】：

使用 jQuery：

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

否则：

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

应该工作

【讨论】：

这种情况下不需要使用JQuery
他给出了一个没有 JQuery 的替代解决方案。没有必要投反对票。

【解决方案4】：

你可以试试这个

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

这应该为你做。

【讨论】：

【解决方案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);

【讨论】：

【解决方案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;');

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

【讨论】：

【解决方案7】：

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

【讨论】：

我用element.classList.add("myClass")，它有效，是你的意思吗？与其他解决方案相比，它使我的源代码更易于维护和理解。

【解决方案8】：

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

【讨论】：

【解决方案9】：

使用cssText

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

【讨论】：

【解决方案10】：

试试这样的

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

【讨论】：