How to change a css class style through Javascript

Question

According to the book that I am reading  it is better to change a css  by class when you are using Javascript for changing css  But how  Can someone give a sample snippet for this

User · Answer

You may also be interested in modifying it using jQuery  http   api jquery com category css

User · Answer

I d highly recommend jQuery   It then becomes as simple as       mydiv   addClass  newclass      You don t have to worry about removing the old class then as addClass   will only append to it   You also have removeClass     The other advantage over the getElementById   method is you can apply it to multiple elements at the same time with a single line of code      div   addClass  newclass        oldclass   addClass  newclass      The first example will add the class to all DIV elements on the page   The second example will add the new class to all elements that currently have the old class

User · Answer

If you want to manipulate the actual CSS class instead of modifying the DOM elements or using modifier CSS classes  see https   stackoverflow com a 50036923 482916

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt script gt    document  ready function               div   addClass function                return  par                 lt  script gt   lt style gt   par       color  blue     lt  style gt   lt  head gt   lt body gt   lt div class  test  gt This is a paragraph  lt  div gt   lt  body gt   lt  html gt

User · Answer

document getElementById  my   className    myclass

User · Answer

Since classList is supported in all major browsers and jQuery drops support for IE lt 9  in 2 x branch as Stormblack points in the comment   considering this HTML   lt div id  mydiv  class  oldclass  gt text lt  div gt    you can comfortably use this syntax   document getElementById  mydiv   classList add  newClass      This will also result in    lt div id  mydiv  class  oldclass newclass  gt text lt  div gt    plus you can also use remove  toggle  contains methods

User · Answer

use the className property   document getElementById  your element s id   className    cssClass

User · Answer

There are two ways in which this can be accomplished using vanilla javascript   The first is className and the second is classList   className works in all browsers but can be unwieldy to work with when modifying an element s class attribute   classList is an easier way to modify an element s class es    To outright set an element s class attribute  className is the way to go  otherwise to modify an element s class es   it s easier to use classList   Initial Html   lt div id  ID  gt  lt  div gt    Setting the class attribute  var div   document getElementById  ID    div className    foo bar car     Result    lt div id  ID  class  foo bar car  gt  lt  div gt      Adding a class  div classList add  car      Class already exists  nothing happens div classList add  tar      Note  There s no need to test if a class exists before adding it  If a class needs to be added  just add it  If it already exists  a duplicate won t be added  Result    lt div id  ID  class  foo bar car tar  gt  lt  div gt      Removing a class  div classList remove  car    div classList remove  tar    div classList remove  car      No class of this name exists  nothing happens   Note  Just like add  if a class needs to be removed  remove it  If it s there  it ll be removed  otherwise nothing will happen  Result    lt div id  ID  class  foo bar  gt  lt  div gt      Checking if a class attribute contains a specific class  if  div classList contains  foo           Do stuff       Toggling a class  var classWasAdded   div classList toggle  bar        bar  gets removed    classWasAdded is false since  bar  was removed  classWasAdded   div classList toggle  bar        bar  gets added    classWasAdded is true since  bar  was added    toggle has a second boolean parameter that  in my opinion  is redundant and isn t worth going over   For more information on classList  check out MDN  It also covers browser compatibility if that s a concern  which can be addressed by using Modernizr for detection and a polyfill if needed

User · Answer

Suppose you have    lt div id  mydiv  class  oldclass  gt text lt  div gt    and the following styles    oldclass   color  blue    newclass   background-color  yellow     You can change the class on mydiv in javascript like this   document getElementById  mydiv   className    newclass     After the DOM manipulation you will be left with    lt div id  mydiv  class  newclass  gt text lt  div gt    If you want to add a new css class without removing the old one  you can append to it   document getElementById  mydiv   className      newClass     This will result in    lt div id  mydiv  class  oldclass newclass  gt text lt  div gt

[javascript] How to change a css class style through Javascript?

Examples related to javascript

Examples related to html

Examples related to css