How to set background color of HTML element using css properties in JavaScript

Question

How can I set the background color of an HTML element using css in JavaScript

User · Answer

ID    Class   css  background-color     FF6600      By using jquery we can target the element s class or Id to apply css background or any other stylings

User · Answer

Changing CSS of a HTMLElement  You can change most of the CSS properties with JavaScript  use this statement   document querySelector  lt selector gt   style  lt property gt      lt new style gt    where  lt selector gt    lt property gt    lt new style gt  are all String objects   Usually  the style property will have the same name as the actual name used in CSS  But whenever there is more that one word  it will be camel case  for example background-color is changed with backgroundColor   The following statement will set the background of  container to the color red   documentquerySelector   container   style background    red    Here s a quick demo changing the color of the box every 0 5s    x000D   x000D  colors     rosybrown    cornflowerblue    pink    lightblue    lemonchiffon    lightgrey    lightcoral    blueviolet    firebrick    fuchsia    lightgreen    red    purple    cyan   x000D   x000D  let i   0 x000D  setInterval      gt    x000D    const random   Math floor Math random   colors length  x000D    document querySelector   box   style background   colors random   x000D     500  x000D   box   x000D    width  100px  x000D    height  100px  x000D    x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D      Changing CSS of multiple HTMLElement  Imagine you would like to apply CSS styles to more than one element  for example  make the background color of all elements with the class name box lightgreen  Then you can    select the elements with  querySelectorAll and unwrap them in an object Array with the destructuring syntax   const elements       document querySelectorAll   box     loop over the array with  forEach and apply the change to each element   elements forEach element   gt  element style background    lightgreen      Here is the demo    x000D   x000D  const elements       document querySelectorAll   box    x000D  elements forEach element   gt  element style background    lightgreen   x000D   box   x000D    height  100px  x000D    width  100px  x000D    display  inline-block  x000D    margin  10px  x000D    x000D   lt div class  box  gt  lt  div gt  x000D   lt div class  box  gt  lt  div gt  x000D   lt div class  box  gt  lt  div gt  x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D      Another method  If you want to change multiple style properties of an element more than once you may consider using another method  link this element to another class instead   Assuming you can prepare the styles beforehand in CSS you can toggle classes by accessing the classList of the element and calling the toggle function    x000D   x000D  document querySelector   box   classList toggle  orange   x000D   box   x000D    width  100px  x000D    height  100px  x000D    x000D   x000D   orange   x000D    background  orange  x000D    x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D      List of CSS properties in JavaScript  Here is the complete list   alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize lt  a gt  lt  td gt  backfaceVisibility borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource   borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap content fontStretch hangingPunctuation height hyphens icon imageOrientation navDown navIndex navLeft navRight navUp gt  cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform textJustify top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility voiceBalance voiceDuration voicePitch voicePitchRange voiceRate voiceStress voiceVolume whiteSpace width wordBreak wordSpacing wordWrap widows writingMode zIndex

User · Answer

class   0  style background    blue

User · Answer

Javascript   document getElementById  ID   style background    colorName     JS ID  document getElementsByClassName  ClassName   0  style background    colorName     JS Class   Jquery       ID  className   css  background   colorName      One style      ID  className   css   background   colorName   color   colorname       Multiple style

User · Answer

body   css  background   green      jQuery  document body style backgroundColor    green     javascript   so many ways are there I think it is very easy and simple  Demo On Plunker

User · Answer

var element   document getElementById  element    element style background     FF00AA

User · Answer

A simple js can solve this   document getElementById  idName   style background    blue

User · Answer

Add this script element to your body element    lt body gt     lt script type  text javascript  gt       document body style backgroundColor     AAAAAA      lt  script gt   lt  body gt

User · Answer

In general  CSS properties are converted to JavaScript by making them camelCase without any dashes  So background-color becomes backgroundColor   function setColor element  color        element style backgroundColor   color        where el is the concerned element var el   document getElementById  elementId    setColor el   green

User · Answer

KISS Answer   document getElementById  element   style background     DD00DD

User · Answer

You can try this  var element   document getElementById  element id    element style backgroundColor    color or color code     Example   var element   document getElementById  firstname    element style backgroundColor    green    Or  ff55ff   JSFIDDLE

User · Answer

Or  using a little jQuery       fieldID   css  background-color     FF6600

User · Answer

you can use       elementID   css  background-color     C0C0C0

User · Answer

You can do it with JQuery        class   css  background   yellow

User · Answer

x000D   x000D  var element   document getElementById  element    x000D   x000D  element onclick   function     x000D    element classList add  backGroundColor    x000D     x000D    setTimeout function     x000D      element classList remove  backGroundColor    x000D       2000   x000D     x000D   backGroundColor   x000D      background-color  green  x000D    x000D   lt div id  element  gt Click Me lt  div gt  x000D   x000D   x000D

User · Answer

You can use      lt script type  text javascript  gt       Window body style backgroundColor     5a5a5a      lt  script gt

User · Answer

You might find your code is more maintainable if you keep all your styles  etc  in CSS and just set   unset class names in JavaScript   Your CSS would obviously be something like    highlight       background  ff00aa      Then in JavaScript   element className   element className      highlight          highlight

[javascript] How to set background color of HTML element using css properties in JavaScript

Examples related to javascript

Examples related to css

Examples related to background-color