1. Cambiar parcialmente el estilo
Hay tres tipos: cambiar el estilo directo, cambiar el nombre de clase y cambiar el texto css. Las cosas a tener en cuenta son:
Preste atención a las mayúsculas:
JavaScript distingue mucho entre mayúsculas y minúsculas. ClassName no puede escribir "N" como "n" y cssText no puede escribir "T" como "t", de lo contrario no se puede lograr el efecto.
Método de llamada:
Si cambia className, declare la clase en la hoja de estilo con anticipación, pero no siga el estilo al llamar. Escribir como document.getElementById('obj').style.className="..." ¡está mal! Sólo se puede escribir como: document.getElementById('obj').className="…"
Cambiar texto css
Pero si usas cssText, debes agregar estilo. La forma correcta de escribirlo es: document.getElementById('obj').style.cssText=”…”
No necesito hablar sobre cambiar el estilo directo. Solo recuerda escribir el estilo específico, como por ejemplo.
Copie el código de código de la siguiente manera:
document.getElementById('obj').style.backgroundColor=”#003366″
2. Cambiar globalmente el estilo
Normalmente, podemos lograr el cambio de estilos de páginas web en tiempo real cambiando el valor href del estilo del enlace externo, es decir, "cambiando el estilo de la plantilla". En este momento, primero debemos proporcionar una identificación al objetivo que debe cambiarse, como
<enlace rel = "hoja de estilo" tipo="texto/css" id="css" href="firefox.css" />
Es muy sencillo de llamar, como por ejemplo
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Haz clic en mí para cambiar el estilo</span>
Los novatos a menudo no saben cómo escribir estilos CSS específicos en JavaScript y, a veces, los requisitos son diferentes en diferentes navegadores. Por ejemplo, float está escrito como styleFloat en IE y cssFloat en FIREFOX, lo que requiere la acumulación de todos. Buscar "ccvita javascript" en Google puede solucionar tus dudas.
conocimientos basicos
Generalmente existen tres formas de llamar a las hojas de estilo en las páginas web.
El primero: Vincular a un archivo de hoja de estilo externo (Vincular a una Hoja de Estilo)
Primero puede crear un archivo de hoja de estilo externo (.css) y luego usar el objeto de enlace HTML. Los ejemplos son los siguientes:
Copie el código de código de la siguiente manera:
<cabeza>
<título>Título del documento</título>
<enlace rel=hoja de estilo href="http://www.ccvita.com/demo.css" tipo="text/css">
</enlace></head>
En XML, lo agregaría en el área de declaración como se muestra en el siguiente ejemplo:
Copie el código de código de la siguiente manera:
< ?xml-stylesheet tipo="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Segundo tipo: Definir un objeto de bloque de estilo interno (Incrustar un bloque de estilo)
Puedes insertar un
objeto de bloque. Para conocer los métodos de definición, consulte la sintaxis de la hoja de estilo. Los ejemplos son los siguientes:
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<título>Título del documento</título>
<tipo de estilo="texto/css">
<!--
cuerpo {fuente: 10pt "Arial"}
h1 {fuente: 15pt/17pt "Arial"; peso de fuente: negrita color: granate}
h2 {fuente: 13pt/15pt "Arial"; peso de fuente: negrita color: azul}
p {fuente: 10pt/12pt "Arial" color: negro}
-->
</estilo>
</cabeza>
<cuerpo>
</cuerpo></html>
Tenga en cuenta que configurar el atributo de tipo del objeto de estilo en "texto/css" permite a los navegadores que no admiten este tipo ignorar la hoja de estilo.
El tercer tipo: definición en línea (estilos en línea)
La definición en línea consiste en utilizar el atributo de estilo del objeto dentro del marcado del objeto para definir los atributos de la hoja de estilo que se le aplican. Los ejemplos son los siguientes:
Copie el código de código de la siguiente manera:
<p style="margin-left: 0.5in; margin-right:0.5in">Esta línea ha agregado parches exteriores izquierdo y derecho</p><p></p>