es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Agregar y eliminar clases HTML a pedido con jQuery

Agregar una nueva clase de HTML es una obviedad; solo abre el documento HTML, busca lo que deseas agregar, inserta y nombra la clase. Pero cuando se trata de crear un sitio web interactivo que permita a los visitantes interactuar con él, es posible que deba modificar, insertar y eliminar las clases de HTML a pedido.

Puedes hacer esto con jQuery. Esta función de ejemplo a continuación agregará y eliminará my-new-class a la

.

 // ## add clase $ ('div'). addClass ('my-new-class'); // ## remove class $ ('div'). removeClass ('my-new-class'); 

También podemos usar código JavaScript estándar para agregar / eliminar clases HTML de esta manera:

 // agrega la clase document.getElementById ('elem'). className = 'my-new-class'; // eliminar la clase document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) my-new-class (?! \ S) / g, '') 

El código como puede ver arriba es menos directo que cuando lo estamos haciendo con jQuery de JavaScript Framework. Pero si no quiere confiar en un marco, siempre puede usar una nueva API de JavaScript llamada classList .

Usando classList API

De forma similar a jQuery, classList proporciona un conjunto de métodos que nos permiten modificar clases HTML.

En un caso donde hay un div con múltiples clases, podemos recuperar las clases que están asignadas en el div usando classList .

 var classes = document.getElementByID ('elem'). classList; console.log (clases); 

Cuando abrimos la Consola del navegador, podemos ver la lista de las clases.

Para agregar y eliminar clases, podemos usar .add() y .remove() .

 var elem = document.getElementByID ('elem'); // agrega la clase elem.classList.add ('my-new-class'); // eliminar la clase elem.classList.remove ('my-new-class'); 

Agregar varias clases también se puede hacer separando cada clase con una coma :

 elem.classList.add ('mi-nueva-clase', 'mi-otra-clase'); 

Para verificar si ciertos elementos contienen la clase especificada, podemos usar .contains() . Devolverá verdadero si la clase especificada está presente, y devolverá falso si no lo está.

 elem.classList.contains ('class-name'); 

También podemos alternar la clase usando .toggle() . El siguiente fragmento de código muestra cómo .toggle() método .toggle() con un evento de clic del mouse.

 var button = document.getElementById ('button'); function toggle () {elem.classList.toggle ('bg'); } button.addEventListener ('click', toggle, false); 

Mira la demostración en acción desde los siguientes enlaces.

  • Ver demostración
  • Descargar Fuente

Pensamiento final

classList es una nueva API nativa de JavaScript que también se presenta junto con HTML5. Es limpio y simple, y funciona en los siguientes navegadores: Firefox 3.6, Opera 11.5, Chrome 8 y Safari 5.1. Sin embargo, está ausente en Internet Explorer 9 y versiones posteriores, por lo que es posible que tenga que usar Polyfills cuando implemente la API classList en Internet Explorer.

Recurso adicional

  • La API classList - HTML5 Doctor
  • Elemento classList - MDN
  • Notas sobre la API classList

Cómo agregar estilos a TinyMCE y contenido de reducción

Cómo agregar estilos a TinyMCE y contenido de reducción

Muchos escritores prefieren trabajar en Markdown porque es un lenguaje más simple con menos obstáculos que escalar. De acuerdo, está lejos de ser perfecto, pero ofrece una visión más clara de su texto con la facilidad de exportarlo a HTML .Desafortunadamente, los estilos de Markdown predeterminados suelen ser bastante aburridos. Per

(Consejos de tecnología y diseño)

Gratis para uso comercial - Un nuevo CC0 Foto de archivo Sitio

Gratis para uso comercial - Un nuevo CC0 Foto de archivo Sitio

Cheesy stock photography está a punto de ser reemplazado por fotos de calidad, muchas de las cuales se pueden descargar de forma gratuita . Sí, hay muchos sitios de fotos pagos, pero los gratuitos son más fáciles de usar y más accesibles con una etiqueta de precio de $ 0.Uno de los sitios más nuevos en este campo es FFCU, abreviatura de Free For Commercial Use . No e

(Consejos de tecnología y diseño)