How to change css property using javascript

Question

I want to change css property of class using javascript  What i actually want is when a div is hoverd  another div should become visible   My css is like     left   right      margin 10px      float left      border 1px solid red      height 60px      width 60px    left hover   right hover      border 1px solid blue      center      float left      height 60px      width 160px     center  left1   center  right1      margin 10px      float left      border 1px solid green      height 60px      width 58px      display none      And html file is like     lt div class  left  gt      Hello  lt  div gt   lt div class  center  gt          lt div class  left1  gt             Bye      lt  div gt          lt div class  right1  gt             Bye1      lt  div gt       lt  div gt   lt div class  right  gt      Hello2  lt  div gt    When hello1 div is hovered  bye1 div should be visible and similarly bye2 should appear when hello2 is hovered   http   jsfiddle net rohan23dec TqDe9 1

User · Answer

This is really easy using jQuery   For instance       left   mouseover function       left1   show          left   mouseout function       left1   hide        I ve update your fiddle  http   jsfiddle net TqDe9 2

User · Answer

Just for the info  this can be done with CSS only with just minor HTML and CSS changes   HTML    lt div class  left  gt      Hello  lt  div gt   lt div class  right  gt      Hello2  lt  div gt   lt div class  center  gt          lt div class  left1  gt             Bye      lt  div gt          lt div class  right1  gt             Bye1      lt  div gt       lt  div gt    CSS    left   right      margin 10px      float left      border 1px solid red      height 60px      width 60px    left hover   right hover      border 1px solid blue     right       float  right     center      float left      height 60px      width 160px     center  left1   center  right1      margin 10px      float left      border 1px solid green      height 60px      width 58px      display none     left hover    center  left1       display block      right hover    center  right1       display block      and the DEMO  http   jsfiddle net pavloschris y8LKM

User · Answer

Use document getElementsByClassName  className   style   your style   var d   document getElementsByClassName  left1    d className   d className     otherclass     Use single quotes for JS strings contained within an html attribute s double quotes  Example   lt div class  somelclass  gt  lt  div gt    then document getElementsByClassName  someclass   style    NewclassName     lt div class  someclass  gt  lt  div gt    then document getElementsByClassName  someclass   style    NewclassName    This is personal experience

User · Answer

var hello       right      or var hello   document getElementByClassName  right   var bye       right1   hello onmouseover   function         bye style visibility    visible    hello onmouseout   function         bye style visibility    hidden

User · Answer

You can use style property for this  For example  if you want to change border -   document elm style border    3px solid  FF0000     similarly for color -    document getElementById  p2   style color  blue     Best thing is you define a class and do this -  document getElementById  p2   className    classname      Cross Browser artifacts must be considered accordingly

User · Answer

Consider the following example  If you want to change a single CSS property say  color to  blue    then the below statement works fine  document getElementById  quot ele id quot   style color  quot blue quot    But  for changing multiple properies the more robust way is using Object assign   or  object spread operator        See below  const ele document getElementById  quot ele id quot    const custom style       display   quot block quot       color   quot red quot       Object assign    Object assign ele style custum style    Spread operator works similarly  just the syntax is a little different

[javascript] How to change css property using javascript

Examples related to javascript

Examples related to css

Examples related to hover