how to append a css class to an element by javascript

Question

Suppose a HTML element s id is known  so the element can be refereced using   document getElementById element id     Does a native Javascript function exist that can be used to append a CSS class to that element

User · Answer

classList is a convenient alternative to accessing an element s list of classes   see http   developer mozilla org en-US docs Web API Element classList   Not supported in IE  lt  10

User · Answer

Adding class using element s classList property   element classList add  my-class-name      Removing   element classList remove  my-class-name

User · Answer

When an element already has a class name defined  its influence on the element is tied to its position in the string of class names   Later classes override earlier ones  if there is a conflict   Adding a class to an element ought to move the class name to the sharp end of the list  if it exists already   document addClass  function el  css       var tem  C  el className split   s     A             while C length           tem  C shift            if tem  amp  amp  tem   css  A A length   tem            A A length   css      return el className  A join

User · Answer

you could use setAttribute   Example      For adding one class     document getElementById  main   setAttribute  class   classOne       For multiple classes     document getElementById  main   setAttribute  class    classOne classTwo

User · Answer

addClass  selector classes   gt document querySelector selector  classList    classes split          This will add ONE class or MULTIPLE classes     addClass   myDiv   back-red         gt  Add  back-red  class to  lt div id  myDiv   gt  addClass   myDiv   fa fa-car       gt Add two classes to  div

User · Answer

You should be able to set the className property of the element   You could do a    to append it

User · Answer

var element   document getElementById element id   element className          newClassName    Voil    This will work on pretty much every browser ever  The leading space is important  because the className property treats the css classes like a single string  which ought to match the class attribute on HTML elements  where multiple classes must be separated by spaces     Incidentally  you re going to be better off using a Javascript library like prototype or jQuery  which have methods to do this  as well as functions that can first check if an element already has a class assigned   In prototype  for instance      Prototype automatically checks that the element doesn t already have the class   element id  addClassName newClassName     See how much nicer that is

[javascript] how to append a css class to an element by javascript?

Examples related to javascript

Examples related to css