How can I set multiple CSS styles in JavaScript

Question

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

User · Answer

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

User · Answer

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        x000D   x000D     styles to apply x000D  const myStyles     x000D     background-color    magenta   x000D     border    10px dotted cyan   x000D     border-radius    5px   x000D     box-sizing    border-box   x000D     color    yellow   x000D     display    inline-block   x000D     font-family    monospace   x000D     font-size    20px   x000D     margin    1em   x000D     padding    1em  x000D     x000D   x000D  function applyStyles  el  styles    x000D    for  const prop in styles    x000D      el style setProperty prop  styles prop    x000D      x000D     x000D   x000D     create example paragraph and append it to the page body x000D  const p   document createElement  p    x000D  p textContent    This is a paragraph    x000D  document body appendChild p   x000D   x000D     when the paragraph is clicked  call the function  providing the x000D     paragraph and myStyles object as arguments x000D  p onclick    ev    gt    x000D    applyStyles p  myStyles   x000D    x000D   x000D     this time  target the page body and supply an object literal x000D  applyStyles document body    background-color    grey     x000D   x000D   x000D

User · Answer

Please consider the use of CSS for adding style class and then add this class by JavaScript classList  amp  simply add   function  style css  nice-style    fontsize   12px   left  200px  top  100px     script JavaScript const addStyle   document getElementById  quot myElement quot    addStyle classList add  nice-style

User · Answer

Is the below innerHtml valid    x000D   x000D  var styleElement   win document createElement  STYLE    x000D  styleElement innerHTML     notEditableVatDisplay  display inline-flex   editableVatInput  print-section i fa fa-sort click-sortable display   none  important    x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I just stumbled in here and I don t see why there is so much code required to achieve this   Add your CSS code as a string    x000D   x000D  let styles     x000D      font-size 15em  x000D      color red  x000D      transform rotate 20deg   x000D   x000D  document querySelector      style   styles x000D  a x000D   x000D   x000D

User · Answer

lt button onclick  hello    gt Click  lt  button gt    lt p id  demo  style  background  black  color  aliceblue   gt    hello     lt  p gt    lt script gt    function hello            document getElementById  demo   style cssText          font-size  40px  background   f00  text-align  center         lt  script gt

User · Answer

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      gt      elm style prop    value

User · Answer

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

User · Answer

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

User · Answer

With ES6  you can use also backticks and even copy the css directly from somewhere   x000D   x000D  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  x000D   x000D   x000D

User · Answer

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

User · Answer

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  amp  for-loop  var el   document getElementById   myElement        css           font-size   12px         left   200px         top   100px            for i in css      el style i    css i

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Since strings support adding  you can easily add your new style without overriding the current  document getElementById  quot myElement quot   style cssText         font-size  12px     left  200px     top  100px

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  const styles     x000D     font-size    18px   x000D     font-weight    bold   x000D     background-color    lightgrey   x000D    color   red   x000D     padding    10px  important   x000D    margin   20px   x000D    width   100px  important   x000D    border   1px solid blue  x000D     x000D   x000D  const elem   document getElementById  my div    x000D   x000D  Object entries styles  forEach   prop  val     gt    x000D    const  value  pri         val split       x000D    elem style setProperty prop  value  pri   x000D      x000D   lt div id  my div  gt  Hello  lt  div gt  x000D   x000D   x000D

[javascript] How can I set multiple CSS styles in JavaScript?

Examples related to javascript

Examples related to coding-style