Use JavaScript para obter atributos de elementos pseudo-elementos
Todo mundo sabe como obter seu valor de estilo CSS através do atributo de estilo de um elemento, mas pode obter o valor do atributo de um elemento pseudo-elemento? Sim, você também pode acessar pseudo-elementos na página usando JavaScript.
A cópia do código é a seguinte:
// Obtenha o valor de cor do .Elemment: antes
var color = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': antes'
) .getPropertyValue ('cor');
// obtenha o valor de conteúdo de .Element: antes
var content = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': antes'
) .getPropertyValue ('content');
Você viu isso? Posso acessar o valor do atributo de conteúdo no elemento pseudo-elemento. Se você deseja criar um site dinâmico e chique, esta é uma técnica muito útil!
API da lista de classe
Muitas bibliotecas de ferramentas JavaScript possuem addclass, removeclass e toggleClass. Para ser compatível com os navegadores antigos, essas bibliotecas de classes usam métodos para pesquisar o nome da classe do elemento, anexar e excluir esta classe e depois atualizar o nome da classe. De fato, há uma nova API que fornece métodos para adicionar, excluir e inverter atributos da classe CSS, chamada ClassList:
A cópia do código é a seguinte:
mydiv.classList.add ('mycssclass'); // adiciona uma aula
mydiv.classList.remove ('mycssclass'); // remove uma classe
mydiv.classList.toggle ('mycssclass'); // alterna uma aula
A maioria dos navegadores implementa a API de classe muito cedo e, finalmente, o IE10 também a implementou.
Adicione diretamente e exclua regras de estilo às folhas de estilo
Estamos todos familiarizados com o uso de elemento.style.propertyName para modificar os estilos. O uso do JavaScript pode nos ajudar a fazer isso, mas você sabe como adicionar ou corrigir uma regra de estilo CSS existente? Na verdade, muito simples.
A cópia do código é a seguinte:
função addcssrule (folha, seletor, regras, índice) {
if (sheet.insertrule) {
Sheet.insertrule (seletor + "{" + Regras + "}", index);
}
outro {
Sheet.addrule (seletor, regras, índice);
}
}
// Use!
addcssrule (document.stylesheets [0], "cabeçalho", "float: esquerda");
Esse método é geralmente usado para criar uma nova regra de estilo, mas você pode fazer isso se desejar modificar uma regra existente.
Carregando arquivos CSS
O carregamento preguiçoso de fotos, json, scripts etc. é uma boa maneira de acelerar a exibição da página. Podemos usar o Curl.js e outros carregadores JavaScript para atrasar o carregamento desses recursos externos. Mas você sabe que as folhas de estilo CSS também podem ser atrasadas no carregamento, e a função de retorno de chamada será notificada após o sucesso da carga.
A cópia do código é a seguinte:
Curl (
[[
"Namespace/mywidget",
"CSS! Namespace/Resources/mywidget.css"
],
função (mywidget) {
// você pode operar no mywidget
// Não há referência a este arquivo CSS aqui porque não é necessário;
// Só precisamos que ele seja carregado na página
}
});
O script de destaque da sintaxe do prismjs usado por este site é um carregamento preguiçoso. Quando todos os recursos forem carregados, a função de retorno de chamada será acionada e eu posso carregá -la na função de retorno de chamada. Muito útil!
Evento de ponteiro do mouse CSS
O atributo de eventos ponteiros do evento de ponteiro do mouse CSS é muito interessante. Sua eficácia é muito semelhante ao JavaScript. Quando você define esse atributo para nenhum, ele pode efetivamente impedir que o elemento seja desativado. Você pode dizer "e daí?", Mas, na verdade, proíbe algum evento JavaScript ou funções de retorno de chamada nesse elemento!
A cópia do código é a seguinte:
.disabled {ponte-e eventos: nenhum; }
Clique neste elemento e você descobrirá que nenhum evento será acionado por qualquer ouvinte que você colocou neste elemento. Realmente um recurso mágico - você não precisa verificar se uma determinada classe CSS existe para impedir que um evento seja acionado.
Os acima são 5 maneiras de interagir com JavaScript e CSS por mim. Se você tiver algum melhor, por favor me diga. Este artigo será atualizado continuamente.