QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Managing HTML Element Classes Using classList API

Managing HTML Element Classes Using classList API

It was always difficult to manage classes of HTML elements using JavaScript, therefore developer depended on jQuery class management function to manipulate classes. But now the new classList API makes manipulation of classes easy in JavaScript.


Let’s see the different functions belonging to classList API:

classList property

classList property of HTML elements is the heart of classList API. It exposes all the classList API functions.

add()

add() function is used to add a new class to the HTML element.

remove()

remove() is used to remove a class.

toggle()

Sometimes we need to add or remove a class name based on a user interaction or the state of the site. This is done using the toggle() method

item()

The classList API provides a method for retrieving class names based on it’s position in the list of classes.

length

length property returns the total number of classes attached to the element.

contains()

contains() is used to check if a class exists in a element or not.

toString()

It returns class list as a string.

Old Browser Support

Very old browsers don’t support classList API therefore use the classList Polyfill.

Aug 7, 2014Narayan Prusty
Prefetching DNS using rel="dns-prefetch"Setting Up SEO Friendly WordPress Maintenance Mode

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • classList property
  • add()
  • remove()
  • toggle()
  • item()
  • length
  • contains()
  • toString()
  • Old Browser Support
Related Articles
  • CSS Specificity: Priortizing Selectors Rules
  • GMail Removes “class”, “id” and Styles from HTML EMail
  • Web Notification API Tutorial with Example
  • Multithreading In HTML5 Using Web Workers
  • Detecting If Browser Is Online Or Offline Using JavaScript
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license