How can I set multiple CSS styles in JavaScript?

143
February 11, 2022, at 07:50 AM

I have the following JavaScript variables:

var fontsize = "12px"
var left= "200px"
var top= "100px"

I know that I can set them to my element iteratively like this:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

Is it possible to set them all together at once, something like this?

document.getElementById("myElement").style = allMyStyle 
Answer 1

If you have the CSS values as string and there is no other CSS already set for the element (or you don't care about overwriting), make use of the cssText property:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

You can also use template literals for an easier, more readable multiline CSS-like syntax:

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

This is good in a sense as it avoids repainting the element every time you change a property (you change them all "at once" somehow).

On the other side, you would have to build the string first.

Answer 2

Using Object.assign:

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

This also gives you ability to merge styles, instead of rewriting the CSS style.

You can also make a shortcut function:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}
Answer 3

@Mircea: It is very much easy to set the multiple styles for an element in a single statement. It doesn't effect the existing properties and avoids the complexity of going for loops or plugins.

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

BE CAREFUL: If, later on, you use this method to add or alter style properties, the previous properties set using 'setAttribute' will be erased.

Answer 4

Make a function to take care of it, and pass it parameters with the styles you want changed..

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

and call it like this

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

for the values of the properties inside the propertyObject you can use variables..

Answer 5

I just stumbled in here and I don't see why there is so much code required to achieve this.

Add your CSS code using String Interpolation.

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`
document.querySelector('*').style = styles
a

Answer 6

A JavaScript library allows you to do these things very easily

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

Object and a for-in-loop

Or, a much more elegant method is a basic object & for-loop

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  
for(i in css){
   el.style[i] = css[i];
}
Answer 7

set multiple css style properties in Javascript

document.getElementById("yourElement").style.cssText = cssString;

or

document.getElementById("yourElement").setAttribute("style",cssString);

Example:

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";
document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
Answer 8

Simplest way for me was just using a string/template litteral:

elementName.style.cssText = `
                                width:80%;
                                margin: 2vh auto;
                                background-color: rgba(5,5,5,0.9);
                                box-shadow: 15px 15px 200px black; `;

Great option cause you can use multiple line strings making life easy.

Check out string/template litterals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 9

You can have individual classes in your css files and then assign the classname to your element

or you can loop through properties of styles as -

var css = { "font-size": "12px", "left": "200px", "top": "100px" };
for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}
Answer 10

Using plain Javascript, you can't set all the styles at once; you need to use single lines for each of them.

However, you don't have to repeat the document.getElementById(...).style. code over and over; create an object variable to reference it, and you'll make your code much more readable:

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...etc. Much easier to read than your example (and frankly, just as easy to read as the jQuery alternative).

(if Javascript had been designed properly, you could also have used the with keyword, but that's best left alone, as it can cause some nasty namespace issues)

Answer 11

Don't think it is possible as such.

But you could create an object out of the style definitions and just loop through them.

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};
for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

To develop further, make a function for it:

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}
setStyles(document.getElementById("myElement"), allMyStyle);
Answer 12

Your best bet may be to create a function that sets styles on your own:

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}
setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

Note that you will still have to use the javascript-compatible property names (hence backgroundColor)

Answer 13

Use CSSStyleDeclaration.setProperty() method inside the Object.entries of styles object.
We can also set the priority ("important") for CSS property with this.
We will use "hypen-case" CSS property names.

const styles = { 
  "font-size": "18px", 
  "font-weight": "bold", 
  "background-color": "lightgrey", 
  color: "red", 
  "padding": "10px !important", 
  margin: "20px", 
  width: "100px !important", 
  border: "1px solid blue" 
}; 
 
const elem = document.getElementById("my_div"); 
 
Object.entries(styles).forEach(([prop, val]) => { 
  const [value, pri = ""] = val.split("!"); 
  elem.style.setProperty(prop, value, pri); 
});
<div id="my_div"> Hello </div>

Answer 14

Since strings support adding, you can easily add your new style without overriding the current:

document.getElementById("myElement").style.cssText += `
   font-size: 12px;
   left: 200px;
   top: 100px;
`;
Answer 15

See for .. in

Example:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}
Answer 16

This is old thread, so I figured for anyone looking for a modern answer, I would suggest using Object.keys();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};
function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}
myDiv.style = applyInlineStyles(css);
Answer 17

There are scenarios where using CSS alongside javascript might make more sense with such a problem. Take a look at the following code:

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

This simply switches between CSS classes and solves so many problems related with overriding styles. It even makes your code more tidy.

Answer 18
Strongly typed in typescript:

The object.assign method is great, but with typescript you can get autocomplete like this:

    const newStyle: Partial<CSSStyleDeclaration> =
    { 
        placeSelf: 'centered centered',
        margin: '2em',
        border: '2px solid hotpink'
    };
    Object.assign(element.style, newStyle);

Note the property names are camelCase not with dashes.

This will even tell you when they're deprecated.

Answer 19

This is an old question but I thought it might be worthwhile to use a function for anyone not wanting to overwrite previously declared styles. The function below still uses Object.assign to properly fix in the styles. Here is what I did

function cssFormat(cssText){
   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {
       prop = style.split(":");
       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 
   }) 
   
  return css;
}

Now you can do something like

let mycssText = "background-color:red; color:white;";
let element = document.querySelector("body");
Object.assign(element.style, cssFormat(mycssText));

You can make this easier by supplying both the element selector and text into the function and then you won't have to use Object.assign every time. For example

function cssFormat(selector, cssText){
  
   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {
       prop = style.split(":");
       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 
   }) 
   element = document.querySelector(selector);
   
   Object.assign(element.style, css); // css, from previous code
} 

Now you can do:

cssFormat('body', 'background-color: red; color:white;') ;
//or same as above (another sample) 
cssFormat('body', 'backgroundColor: red; color:white;') ; 

Note: Make sure your document or target element (for example, body) is already loaded before selecting it.

Answer 20

You can write a function that will set declarations individually in order not to overwrite any existing declarations that you don't supply. Let's say you have this object parameter list of declarations:

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

You might write a function that looks like this:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

which takes an element and an object property list of style declarations to apply to that object. Here's a usage example:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);
applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply 
const myStyles = { 
  'background-color': 'magenta', 
  'border': '10px dotted cyan', 
  'border-radius': '5px', 
  'box-sizing': 'border-box', 
  'color': 'yellow', 
  'display': 'inline-block', 
  'font-family': 'monospace', 
  'font-size': '20px', 
  'margin': '1em', 
  'padding': '1em' 
}; 
 
function applyStyles (el, styles) { 
  for (const prop in styles) { 
    el.style.setProperty(prop, styles[prop]); 
  } 
}; 
 
// create example paragraph and append it to the page body 
const p = document.createElement('p'); 
p.textContent = 'This is a paragraph.'; 
document.body.appendChild(p); 
 
// when the paragraph is clicked, call the function, providing the 
// paragraph and myStyles object as arguments 
p.onclick = (ev) => { 
  applyStyles(p, myStyles); 
} 
 
// this time, target the page body and supply an object literal 
applyStyles(document.body, {'background-color': 'grey'});

Answer 21

I think is this a very simple way with regards to all solutions above:

const elm = document.getElementById("myElement")
const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];
allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});
Answer 22

Is the below innerHtml valid

var styleElement = win.document.createElement("STYLE"); 
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

Answer 23

With ES6+ you can use also backticks and even copy the css directly from somewhere:

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`
document.body.append($div)

Answer 24

Please consider the use of CSS for adding style class and then add this class by JavaScript classList & simply add() function.

style.css

.nice-style { 
fontsize : 12px; 
left: 200px;
top: 100px;
}

script JavaScript

const addStyle = document.getElementById("myElement"); addStyle.classList.add('nice-style');

Answer 25
<button onclick="hello()">Click!</button>
<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>
<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>
Answer 26

We can add styles function to Node prototype:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

Then, simply call styles method on any Node:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

It will preserve any other existing styles and overwrite values present in the object parameter.

Rent Charter Buses Company
READ ALSO
duplicate error in typescript material ui style

duplicate error in typescript material ui style

textBoxContainer: { display: '-webkit-box', display: '-webkit-flex', display: '-ms-flexbox', display: 'flex', flexWrap: 'wrap', WebkitFlexWrap: 'wrap', webkitBoxOrient: 'vertical', borderRadius: 8, },

126
How to make a menu with rounded corners only when item is selected with Tailwind css?

How to make a menu with rounded corners only when item is selected with Tailwind css?

I am trying to make this with tailwind css : side menu when page is selected and opened

110
How to increment the CSS counter in Table of Content

How to increment the CSS counter in Table of Content

I'm trying to increment the numbering in the following HTML List:

101
How to make my navbar fit the max width value while not having enough content?

How to make my navbar fit the max width value while not having enough content?

So I have a navbar that has like 4 links and I need it to be a specific width, and i want it to be responsive so I used max-width: 65em, however this results in it not being 65em unless theres alot of content inside which isn't there cuz of the nature...

109