How to Set Multiple CSS Styles in JavaScript

How can I set multiple CSS styles in JavaScript?

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.

Add Multiple Styles with JavaScript

Here is a fiddle.

document.getElementById("id1").setAttribute(
       "style", "color: red; background-color: beige; padding-bottom: 2px; margin: 3px;");

How to use Javascript to add multiple style properties to one element?

To achieve your expected result use setAttribute

HTML:

<button id="Combo Style">Change</button>
<div id="More Text">abcd</div>

JS:

document.getElementById("Combo Style").onclick = function() {
  document.getElementById("More Text").setAttribute("style", "font-size:50px;color:red;");

}

http://codepen.io/nagasai/pen/AXVWwO

JavaScript CSS how to add and remove multiple CSS classes to an element

Try doing this...

document.getElementById("MyElement").className += " MyClass";

Got this here...

How to change multiple CSS styles with JavaScript?

You do not close the onclick declaration with ".

Also, inside the onclick use ' single quotes.

You either use single quotes as 'quote wrapping' and double quotes inside them either you use double quotes and single quotes inside.

But i suggest you use a different approach and toggle a className on the element. And style that className.

See second button

button {color: white; background-color: black; border: none; padding: 10px 20px; transition-duration: .5s; cursor: pointer;}
button:hover {background-color: blue;}

.blue {
  color: blue;
  font-size: 35px;
}

<p id="demo">Changing multiple styles</p>

<button onclick="document.getElementById('demo').style.cssText = 'font-size: 35px; color: blue'">Click Me!</button>

<button onclick="document.getElementById('demo').classList.toggle('blue')">Click Me 2!</button>

How to add multiple CSS styles to an element with .css()

Since you are adding more than one property to your jQuery .css() tag, you will need to make slight adjustments to your .css() syntax like this:

$('.associate-wrapper').find('.bx-wrapper').css({'position': 'absolute', 'margin-top': '30px'});

JSFiddle with above script

---

Or you can just change the selectors the same way CSS does and as mentioned above, since you are adding more than one property to your jQuery .css() tag, you will have to write your script like this:

$('.associate-wrapper .bx-wrapper').css({"position": "absolute", "margin-top": "30px"});

JSFiddle with above script

How to update multiple CSS properties using JavaScript in one operation

This might force the web browser's rendering engine to recalculcate the layout twice.

It won't. The browser will wait for the JS to finish, it can't rerender until the JS reaches a "stopping point", for example below, we wait half a second to do anything (just to let the initial div render), then change it to a blue background, then have a busy loop that should take a while, then make it green. You will never see the blue div.

setTimeout(() => {
  const test = document.getElementById('test');
  test.style.background='blue';
  for (let i = 0; i < 10000000; i++) {
    test.style.background='green';
  }
}, 500);

#test {
width: 10px;
height: 10px;
background: red;
}

<div id="test"></div>

Can I apply multiple CSS styles to Javascript `console.log` arguments?

You can indeed. You only need to add a second %c and then another console.log parameter in the same way as the first.

Example:

console.log(
  `%cMy first styles / %cMy second styles`,
  "font-size:24px",
  "font-size:12px;;"
);

So in your example, you should have the timestamp and tags in the same first parameter, and the next two parameters should be the independent styles, and finally your message:

console.log(`%c${timestamp} %c${tags}`, "background-color: #bbb","color: #999", message)

how to set multiple CSS style properties in typescript for an element?

Try using setAttribute. TypeScript does not have the style property on Element.

element.setAttribute("style", "color:red; border: 1px solid blue;");

Some related discussion in this GitHub issue:
https://github.com/Microsoft/TypeScript/issues/3263

---

Related Topics