Best IT Recipes

Add inline style using Javascript

I am trying to add this code to a dynamically created div element

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

The code in which the dynamic div is created,

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

My idea is to add a style after < div class="well" , but I don't know how to do it.

+46
javascript css innerhtml
Feb 07 '13 at 14:11
source share
11 answers
 nFilter.style.width='330px'; nFilter.style.float='left';

This should add an inline style to the element.

+68
Feb 07 '13 at 14:13
source share

You can do this directly by 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;");
+20
Feb 07 '13 at 14:15
source share

Using jQuery:

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

Otherwise:

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

must work

+6
Feb 07 '13 at 14:15
source share

You can try with this

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

That should do it for you.

+6
Feb 07 '13 at 14:18
source share
 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);
+4
Feb 07 '13 at 14:16
source share

you have to make the css .my_style class, then use .addClass('.mystyle')

+1
Feb 07 '13 at 14:14
source share

Do it with css now that you have created the class. .Well {width: 330px; sail left; }

0
Feb 07 '13 at 14:15
source share

Use cssText

 nFilter.style.cssText +=';width:330px;float:left;';
0
Feb 07 '13 at 14:15
source share

Try something like this

 document.getElementById("vid-holder").style.width=300 + "px";
0
Jun 21 '16 at 12:14
source share

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);
0
Jan 17 '17 at 9:31 on
source share

Several people have an example of using setAttribute that I like. However, it is assumed that you do not have installed styles. I could do something like:

 nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');

Or turn it into a helper function as follows:

 function setStyle(el, css){ el.setAttribute('style', el.getAttribute('style') + ';' + css); } setStyle(nFilter, 'width:330px;float:left;');

This ensures that you can add styles to it continuously, and it will not remove the style currently set, always adding to the current styles. It also adds an extra half-point, so if there is a style ever missing, it will add another to make sure it is completely separate.

0
Aug 14 '17 at 15:47
source share


More articles:


All Articles