Adding 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.

What difference does it make? Inline style will always have the highest specificity. — Amberlamps
– Amberlamps, Commented Feb 7, 2013 at 14:13
because the div is dynamically created, i can't use static since it's a complete Javascript library script — Curtis Crewe
– Curtis Crewe, Commented Feb 7, 2013 at 14:14
Maybe this is an XY problem. What are you trying to achieve? Is nFilter.style.width = '330px'; nFilter.style.float = 'left'; what you are looking for? — Amberlamps
– Amberlamps, Commented Feb 7, 2013 at 14:15

Dharman · Accepted Answer · 2024-01-09 17:41:07Z

168

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

This should add an inline style to the element.

Most CSS names are mapped 1:1 to the JavaScript property. CSS properties with dashes in their names are converted to camel case. For more information see the blue information box at https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

edited Jan 9, 2024 at 17:41

answered Feb 7, 2013 at 14:13

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario S · Accepted Answer · 2013-02-07 14:15:42Z

57

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

answered Feb 7, 2013 at 14:15

Mario S

12k24 gold badges42 silver badges47 bronze badges

1 Comment

milkersarac Over a year ago

Not the CSS styling but the third option with setAttribute worked perfect for me.

Jean-Georges · Accepted Answer · 2013-02-07 14:15:36Z

25

Using jQuery :

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

Otherwise :

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

should work

answered Feb 7, 2013 at 14:15

Jean-Georges

6885 silver badges12 bronze badges

2 Comments

Dharman Over a year ago

It is unnecessary to use JQuery in this case

Termato Over a year ago

He gives an alternate solution without JQuery. Don't see the need for a downvote.

Hector Romero · Accepted Answer · 2013-02-07 14:18:03Z

17

You can try with this

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

That should do it for you.

answered Feb 7, 2013 at 14:18

Hector Romero

2622 silver badges7 bronze badges

Comments

James Kyburz · Accepted Answer · 2013-02-07 14:16:12Z

14

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

answered Feb 7, 2013 at 14:16

James Kyburz

14.6k1 gold badge34 silver badges33 bronze badges

Comments

stuyam · Accepted Answer · 2017-08-14 15:47:27Z

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.

Vincurekf · Accepted Answer · 2017-01-17 09:31:23Z

6

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

answered Jan 17, 2017 at 9:31

Vincurekf

1073 silver badges9 bronze badges

1 Comment

jellytran Over a year ago

this is so cool, it helps me a lot with organizing my plain html css code without framework. thanks a tons!

bennett_an · Accepted Answer · 2013-02-07 14:14:21Z

4

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

answered Feb 7, 2013 at 14:14

bennett_an

1,7081 gold badge16 silver badges35 bronze badges

1 Comment

gouessej Over a year ago

I use element.classList.add("myClass"), it works, is it what you meant? It drives my source code a lot easier to maintain and to understand than other solutions.

marbor3 · Accepted Answer · 2013-02-07 14:15:54Z

1

Use cssText

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

answered Feb 7, 2013 at 14:15

marbor3

4393 silver badges13 bronze badges

Comments

Zubair Mushtaq · Accepted Answer · 2016-06-21 12:14:50Z

1

Try something like this

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

answered Jun 21, 2016 at 12:14

Zubair Mushtaq

3331 gold badge5 silver badges21 bronze badges

Comments

user7212232 · Accepted Answer · 2023-11-07 05:50:01Z

-1

Fantastic solution by stuyam I am adding to that

addStyle('img', 'height:auto;max-width:98%;');


function addStyle(elem, cssText) {

 let curstyle;
 
 const arr = document.querySelectorAll(elem);
 
 arr.forEach(function(el){
    // get and save any current image styles
    curstyle = el.getAttribute("style");
    
    if(curstyle){
       curstyle = curstyle.trim();
        // make sure right most character of [curstyle] is [;]
       let lastchr = curstyle.charAt(curstyle.length - 1);
       
       if(lastchr !== ";"){
           curstyle += ";";
       }
    }else{
       curstyle = "";
    }

   el.style.cssText += cssText;
   console.log(el.style.cssText);
 });
}

answered Nov 7, 2023 at 5:50

user7212232

1612 silver badges7 bronze badges

Collectives™ on Stack Overflow

Adding inline style using JavaScript

11 Answers 11

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related