添加内嵌样式使用Javascript

我试图将此代码添加到动态创建的div元素添加内嵌样式使用Javascript

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

的代码中创建动态div是

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

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

来源

2013-02-07 Curtis Crewe

它有什么不同？内联样式将始终具有最高的特异性。 – Amberlamps

因为div是动态创建的，所以我不能使用静态，因为它是一个完整的Javascript库脚本 –

也许这是一个XY问题。你想达到什么目的？是'nFilter.style.width ='330px'; nFilter.style.float ='左';'你在找什么？ – Amberlamps

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

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

来源

2013-02-07 14:13:39 Dharman

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

来源

2013-02-07 14:14:21

现在你已经创建的类与CSS做吧。 .well { width：330px; float：left; }

来源

2013-02-07 14:15:33

使用jQuery：

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

否则：

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

应该工作

来源

2013-02-07 14:15:36

在这种情况下不需要使用JQuery – Dharman

他给出了一个没有JQuery的替代解决方案。没有看到需要downvote。 – Termato

您可以直接做它的风格：

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

来源

2013-02-07 14:15:42

不是CSS样式，但setAttribute的第三个选项对我来说非常完美。 – milkersarac

使用cssText

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

来源

2013-02-07 14:15:54 marbor3

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

来源

2013-02-07 14:16:12

你可以用这个

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

这应该为你做尝试。

来源

2013-02-07 14:18:03

应用'CSSRule'后才能工作。 – Praveen

尝试这样的事情

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

来源

2016-06-21 12:14:50

如果你不想通过增加线的每个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);

来源

2017-01-17 09:31:23 Vincurekf

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

这可以确保你可以不断补充样式它，它不会删除任何风格通常总是追加到当前样式中。它还增加了一个额外的分号，以便如果有一种风格缺少一个，它会追加另一个以确保它完全分隔。

来源

2017-08-14 15:47:27 stuyam

添加内嵌样式使用Javascript

回答

相关问题