Tecnología

Inicio

Cómo borrar Estilos CSS en un DIV

Los estilos CSS se aplican a los elementos de un documento HTML a través de diferentes "selectores", o criterios para la asignación de estilo. selectores de tipo asignar estilos a HTML elementos (como las etiquetas "div") en función de su nombre de la etiqueta, los selectores de clase asignar estilos a los elementos con un atributo "clase" a juego, y selectores de ID que coincida con elementos individuales por su atributo ID. Hay otros tipos de selectores, pero estos tres son los más comunes. Para borrar estilos de una etiqueta "div", después de cargar la página, retire su nombre (s) clase con JavaScript. Algunos estilos todavía serán heredados de otros selectores, pero esto es inevitable si desea conservar el elemento "div" en sí.

Instrucciones

1 Identificar los diferentes estilos aplicados al elemento "div" y que los selectores de asignarlos. Utilice un selector de clase para todos los estilos que desea ser capaz de limpiar. Coloque la siguiente declaración de la clase de muestra entre las etiquetas "cabeza" de su documento HTML:

<Style type = "text / css">

.nombre de estilo{

font-size: 150%;

}

</ Style>

2 Agregue el siguiente código JavaScript entre las etiquetas "cabeza" de su documento HTML:

<Script type = "text / javascript">

clearStyles función (id) {

document.getElementById(id).className="";

}

</ Script>

La función "clearStyles" despeja el atributo "clase" del elemento cuyo atributo "id" se pasa a la misma. Cuando se borra el atributo "clase", cualquiera de los estilos asignados al elemento que a través de selector de clase desaparecerán.

3 Agregue el código siguiente en el cuerpo del documento HTML para probar el código:

<Div class = "styleName" id = "divID"> Shrink este texto con el botón </ div>

<Input type = "button" value = "Haga clic para desactivar estilos de la DIV" onclick = "clearStyles ( 'divId');">

Tenga en cuenta el uso del atributo "id" para identificar el elemento "div" para eliminar los estilos de. Cuando se hace clic en el botón, la función de JavaScript se llama, y ​​el texto en el "div" pierde su estilo "font-size" (así como su nombre de clase).