CSS class

Introducción

HTML:

<p class="fresa">
...
</p>

CSS:

.fresa {
    color:red;
}

HTML:

<p class="caja fresa">
...
</p>

CSS:

.caja {
    border:1px solid black;
}   

Uso de clases en Javascript

Simple

Aplicar una o varias clases CSS a la primera etiqueta p que hay en la página web.

var p = document.querySelector('p');
// <p class="caja"></p>

p.className = 'fresa';
// <p class="fresa"></p>

p.className = 'caja';
// <p class="caja"></p>

p.className = 'fresa caja';
// <p class="fresa caja"></p>

Avanzada

Facilita usar varias clases al mismo tiempo sobre una etiqueta.

var p = document.querySelector('p');
// <p class="caja"></p>

p.classList.add('fresa');
// <p class="caja fresa"></p>

p.classList.remove('caja');
// <p class="fresa"></p>

p.classList.toggle('fresa');
// <p class=""></p>

p.classList.toggle('fresa');
// <p class="fresa"></p>

p.classList.contains('fresa');
// true

p.classList.toggle('fresa', true);
// Equivalente al .add

p.classList.toggle('fresa', false);
// Equivalente al .remove

Proinf.net