CODEWITHSUNDEEP
javascriptcssinnerhtml
Curtis Crewe
Curtis Crewe

Reputation: 4336

Adding inline style using JavaScript

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.

Upvotes: 135

Views: 428504

Answers (11)

Dharman
Dharman

Reputation: 33395

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

Upvotes: 166

user7212232
user7212232

Reputation: 125

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

Upvotes: -1

stuyam
stuyam

Reputation: 10049

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.

Upvotes: 12

Vincurekf
Vincurekf

Reputation: 107

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

Upvotes: 6

Zubair Mushtaq
Zubair Mushtaq

Reputation: 323

Try something like this

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

Upvotes: 1

Hector Romero
Hector Romero

Reputation: 262

You can try with this

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

That should do it for you.

Upvotes: 17

James Kyburz
James Kyburz

Reputation: 14503

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

Upvotes: 14

marbor3
marbor3

Reputation: 439

Use cssText

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

Upvotes: 1

Mario S
Mario S

Reputation: 11955

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

Upvotes: 56

Jean-Georges
Jean-Georges

Reputation: 688

Using jQuery :

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

Otherwise :

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

should work

Upvotes: 25

bennett_an
bennett_an

Reputation: 1708

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

Upvotes: 4

Related Questions