使用 Javascript 添加内联样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14753147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add inline style using Javascript
提问by Curtis Crewe
I'm attempting to add this code to a dynamically created div element
我正在尝试将此代码添加到动态创建的 div 元素
style = "width:330px;float:left;"
The code in which creates the dynamic divis
创建动态的代码div是
var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>' + sSearchStr + '</label>';
My idea is to add the style after < div class="well"but i don't know how i'd do it.
我的想法是在之后添加样式，< div class="well"但我不知道该怎么做。
回答by Dharman
nFilter.style.width='330px';
nFilter.style.float='left';
This should add an inline style to the element.
这应该为元素添加内联样式。
回答by Mario Sannum
You can do it directly on the style:
您可以直接在样式上执行此操作：
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;");
回答by Jean-Georges
Using jQuery :
使用 jQuery ：
$(nFilter).attr("style","whatever");
Otherwise :
除此以外 ：
nFilter.setAttribute("style", "whatever");
should work
应该管用
回答by Hector Romero
You can try with this
你可以试试这个
nFilter.style.cssText = 'width:330px;float:left;';
That should do it for you.
那应该为你做。
回答by James Kyburz
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);
回答by stuyam
A few people have an example using setAttribute which I like. However it assumes you don't have any styles currently set. I would maybe do something like:
一些人有一个使用我喜欢的 setAttribute 的例子。但是，它假定您当前没有设置任何样式。我可能会做这样的事情：
nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');
Or make it into a helper function like this:
或者把它变成这样的辅助函数：
function setStyle(el, css){
el.setAttribute('style', el.getAttribute('style') + ';' + css);
}
setStyle(nFilter, 'width:330px;float:left;');
This makes sure that you can add styles to it continuously and it won't remove any style currently set by always appending to the current styles. It also adds an extra semi colon so that if there is a style ever missing one it will append another to make sure it is fully delimited.
这确保您可以连续添加样式，并且不会通过始终附加到当前样式来删除当前设置的任何样式。它还添加了一个额外的分号，以便如果某个样式丢失了一个，它将附加另一个以确保它被完全分隔。
回答by Vincurekf
If you don't want to add each css property line by line, you can do something like this:
如果不想逐行添加每个 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);回答by bennett_an
you should make a css class .my_stylethen use .addClass('.mystyle')
你应该创建一个 css 类.my_style然后使用.addClass('.mystyle')
回答by Zubair Mushtaq
Try something like this
尝试这样的事情
document.getElementById("vid-holder").style.width=300 + "px";
