Add inline style using Javascript

Question

I'm attempting to add this code to a dynamically created div element

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

The code in which creates the dynamic div is

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.

Answer 1

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

This should add an inline style to the element.

Answer 2

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

Answer 3

Using jQuery :

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

Otherwise :

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

should work

Answer 4

You can try with this

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

That should do it for you.

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

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

使用cssText

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

Answer 10

尝试这样的事情

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

Answer 11

Do it with css now that you've created the class. .well { width:330px; float:left; }