Alternar clases de CSS

jQuery nos permite seleccionar elementos de una página a través del valor del ID del HTML.

En el siguiente ejemplo;

  1. Generamos 4 párrafos descendientes al div con clase result.
  2. Incluimos la biblioteca jQuery.
  3. Creamos la clase 'marcado' de CSS.
  4. Aplicamos el valor de id "destacado" al primer párrafo contenido en el div.result, dicho elemento será el objetivo principal de los métodos.
  5. Creamos las funciones de javascript: agregar_clase(), remover_clase(), alternar_clase() y mostrar_contenido().
  6. Con formularios utilizamos el evento onClick para llamar a las funciones antes mencionadas.

addClass( ).- Método de jQuery que permite agregar un conjunto de clases a un elemento (elementos) de HTML.

removeClass( ).- Método de jQuery que permite remover las clases que coinciden de la lista de parámetros con las que presentan los elementos seleccionados.

toggleClass( ).- Método de jQuery que permite alternar un conjunto de clases a un elemento (elementos) de HTML.

  1. Si los elementos en cuestión presentan alguna de las clases listadas, esas son removidas.
  2. De lo contrario las agrega.

text( ).- Método de jQuery que devuelve la cadena de texto, de la concatenación del contenido de los elementos seleccionados (excluyendo el HTML). Puede ser usado para documentos XML y HTML.

agregar_clases( ).- Aplica la función addClass() a los elementos seleccionados del div.result.

remover_clases( ).- Aplica la función removeClass() a los elementos seleccionados del div.result.

alternar_clases( ).- Aplica la función toggleClass() a los elementos seleccionados del div.result.

mostrar_contenido( ).- Aplica la función text() al párrafo con id "destacado" del div.result y despliega en un cuadro de diálogo su contenido.

//reglas de estilo CSS
< style type="text/css">
  #container div.result p#destacado {font-size:18px;font-style:italic;}
  .marcado{background-color:#FFA500; font-style:none; font-variant:small-caps;padding:3px;}
< /style>

//Código en javascript
< script type="text/javascript">
  function agregar_clase(){
	$('.result p#destacado').addClass('marcado');	
  }	
  function remover_clase(){
    $('.result p#destacado').removeClass('marcado');	
  }	
  function alternar_clase(){
    $('.result p#destacado').toggleClass('marcado');	
  }	
  function mostrar_contenido(){
    var cad = $('.result p#destacado').text();
    alert("El contenido del párrafo con id destacado es: \n"+cad);
  }


//código en HTMl

< div class ="result">
  < p id="destacado" class="marcado">párrafo 1< /p>
  < p >párrafo 2< /p>
  < p >párrafo 3< /p>
  < p >párrafo 4< /p>
< /div>

< form>
  < input type="button" value="Agregar Clase" onClick="agregar_clase()"> 
  < input type="button" value="Remover Clase" onClick="remover_clase()"> 
  < input type="button" value="Alternar Clase" onClick="alternar_clase()">  
  < input type="button" value="Mostrar Contenido" onClick="mostrar_contenido()">
< /form>

Alternar clases en result

párrafo 1

párrafo 2

párrafo 3

párrafo 4