使用 Javascript 添加内联样式

我试图将这段代码添加到动态创建的 div 元素中

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

创建动态 div的代码是

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

我的想法是增加后 < div class="well"的风格,但我不知道我会怎么做。

368954 次浏览
nFilter.style.width = '330px';
nFilter.style.float = 'left';

This should add an inline style to the element.

you should make a css class .my_style then use .addClass('.mystyle')

Using jQuery :

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

Otherwise :

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

should work

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

Use cssText

nFilter.style.cssText +=';width:330px;float:left;';
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);

You can try with this

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

That should do it for you.

Try something like this

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

If you don't want to add each css property line by line, you can do something like this:

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

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:

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.