Como alterar CSS de um elemento em CSS3

A biblioteca jQuery para CSS3 é usado principalmente para executar esses tipos de necessária, mas tarefas de baixo nível. Você pode, entretanto, usar jQuery para executar algumas tarefas mais sofisticados, incorporando CSS. Há um método .css real (), você pode usar para acessar o CSS associada a um objeto ou para modificar o CSS usado por esse objeto.

Você sempre vê a alteração feita ao CSS porque as mudanças jQuery são inline, em vez de CSS interno ou externo.

Imagine que você queira criar uma tabela de multiplicação formatado que muda automaticamente a cor de uma célula selecionada para torná-lo mais fácil de ver. O exemplo utiliza javascript para gerar a tabela. Claro, você também pode gerar manualmente a tabela usando o código padrão, mas esta abordagem é mais simples. (Você pode encontrar o código completo para este exemplo no Capítulo 06 pasta do jQuery código para download como NestedLoop.html).

// Inicie o table.document.write ( "") - // Iniciar uma row.document.write título ("") - // Criar um heading.for (var i = 0- i lt; = 10 i ++) {if (i == 0) {document.write ( "") -}} // Fim do row.document.write título ("") -para (Var i = 1 i lt; = 10 i ++) {// Iniciar uma row.document.write dados ( "") // Cria o header.document.write linha ("") -para (Var j = 1- j lt; = 10 j ++) {// Adicione cada element.document.write dados ( "") -} // Terminar uma row.document.write dados ("")} // Fim do table.document.write ("
") -} Else {document.write ("
"+ I +"
"+ I +"
"+ I * J +"
") -

Este código é iniciado através da criação de um

e criando uma linha de título, , por isso. O loop simplesmente adiciona os números de 1 a 10 para o cabeçalho usando título,

, etiquetas. Depois a linha de cabeçalho é completa, em seguida, o código começa a criar as linhas de dados.

Cada linha de dados começa com um cabeçalho, seguido por os valores multiplicados. O loop duplo cria uma mesa quadrada que mostra os valores multiplicados por todo o caminho até 10 * 10.

A fim de tornar este exemplo agradável ao olhar, você iria querer usar CSS para diferenciar as linhas e colunas. A célula destaque usaria um tamanho de fonte maior e uma fonte de cor diferente. A fim de fazer essa alteração, o exemplo usa o estilo CSS interna .selected mostrado aqui.

O exemplo agora contém uma tabela com valores multiplicados e um estilo especial para a célula seleccionada. No entanto, ele ainda carece de qualquer formatação para as linhas e não há nenhuma maneira de selecionar uma célula específica para que ele terá a formatação especial necessário. O código a seguir apresenta uma maneira de atingir esses objetivos.

// Executar alguma formatação básica $ ( "th: mesmo") css ( "background-color", "lightblue") - $ ( "th: odd")... Css ( "background-color", "lightgreen") - $ ( "td: mesmo") css ( "background-color", "lightgreen") - $ ( "td: odd").. css ( "background-color", "lightblue") - $ ( "th, td ") css (." width "," 50px ") - // Adicionar um especial effect.$("td").mouseover(function(){$(this).toggleClass("Selected")-})-$("td").mouseout(function(){$(this).toggleClass("Selected")-})-

A formatação consiste em seleccionar a e elementos e, em seguida, usando um filtro básico de escolher entre elementos pares e ímpares. Os elementos estranhos receber uma cor de fundo, e os elementos até receber outro. O código, em seguida, utiliza um selector múltiplo para aplicar a mesma largura de formatação a cada uma das células.

Ao combinar seletores e filtros seletor, você pode criar alguns efeitos interessantes com pouca programação. É importante lembrar que esta tabela é gerada por meio de programação, de modo aplicar formatação ao que poderia ser difícil.

O efeito especial começa com a elementos. Quando um usuário passar o ponteiro do mouse sobre um elemento particular, o código se aplica a .selected CSS formatação a ele. Da mesma forma, quando o usuário coloca o ponteiro do mouse em algum outro lugar, o efeito é alternado de volta ao formato original utilizado pelo elemento. Alternando a formatação é uma maneira rápida de criar um efeito de mouseover.