1. Mude parcialmente o estilo
Existem três tipos: alteração de estilo direto, alteração de className e alteração de cssText. As coisas a serem observadas são:
Preste atenção à capitalização:
JavaScript diferencia muito maiúsculas de minúsculas. ClassName não pode escrever "N" como "n" e cssText não pode escrever "T" como "t", caso contrário, o efeito não poderá ser alcançado.
Método de chamada:
Se você alterar className, declare a classe na folha de estilo com antecedência, mas não siga o estilo ao chamar. Escrever como document.getElementById('obj').style.className="..." está errado! Só pode ser escrito como: document.getElementById('obj').className="…"
Alterar cssText
Mas se você usar cssText, você deve adicionar estilo. A maneira correta de escrever é: document.getElementById('obj').style.cssText=”…”
Não preciso falar sobre mudar o estilo direto. Apenas lembre-se de anotar o estilo específico, como.
Copie o código do código da seguinte forma:
document.getElementById('obj').style.backgroundColor=”#003366″
2. Mude globalmente o estilo
Normalmente, podemos conseguir a troca de estilos de página da web em tempo real alterando o valor href do estilo do link externo, ou seja, "alterando o estilo do modelo". Neste momento, primeiro precisamos fornecer um ID ao alvo que precisa ser alterado, como
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
É muito simples ligar, como
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Clique em mim para alterar o estilo</span>
Os novatos geralmente não sabem como escrever estilos CSS específicos em JavaScript e, às vezes, os requisitos são diferentes em navegadores diferentes. Por exemplo, float é escrito como styleFloat no IE e cssFloat no FIREFOX, o que requer a acumulação de todos. Pesquisar "ccvita javascript" no Google pode tirar suas dúvidas.
conhecimento básico
Geralmente existem três maneiras de chamar folhas de estilo em páginas da web.
O primeiro: Vinculando a um arquivo de folha de estilo externo (Linking to a Style Sheet)
Você pode primeiro criar um arquivo de folha de estilo externo (.css) e depois usar o objeto de link HTML. Os exemplos são os seguintes:
Copie o código do código da seguinte forma:
<cabeça>
<title>Título do documento</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
Em XML, você o adicionaria na área de declaração conforme mostrado no exemplo a seguir:
Copie o código do código da seguinte forma:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Segundo tipo: Definir objeto de bloco de estilo interno (Incorporando um bloco de estilo)
Você pode inserir um
objeto de bloco. Para métodos de definição, consulte a sintaxe da folha de estilos. Os exemplos são os seguintes:
Copie o código do código da seguinte forma:
<html>
<cabeça>
<title>Título do documento</title>
<style type="texto/css">
<!--
corpo {fonte: 10pt "Arial"}
h1 {fonte: 15pt/17pt "Arial"; espessura da fonte: negrito; cor marrom}
h2 {fonte: 13pt/15pt "Arial"; espessura da fonte: negrito cor: azul}
p {fonte: 10pt/12pt "Arial";
-->
</estilo>
</head>
<corpo>
</body></html>
Observe que definir o atributo type do objeto de estilo como "text/css" permite que navegadores que não suportam esse tipo ignorem a folha de estilo.
O terceiro tipo: definição inline (estilos inline)
A definição embutida consiste em usar o atributo de estilo do objeto dentro da marcação do objeto para definir os atributos da folha de estilo que se aplicam a ele. Os exemplos são os seguintes:
Copie o código do código da seguinte forma:
<p style="margin-left: 0.5in; margin-right:0.5in">Esta linha adicionou patches externos esquerdo e direito</p><p> </p>