À medida que os navegadores continuam a atualizar e melhorar, os limites entre CSS e JavaScript estão ficando cada vez mais borrados. Originalmente, eles eram responsáveis por funções completamente diferentes, mas no final, todas pertencem à tecnologia de front-end da Web e precisam trabalhar em estreita colaboração entre si. Nossas páginas da web possuem arquivos .js e .css, mas isso não significa que CSS e JS são independentes e não podem interagir. Você pode não conhecer essas cinco maneiras de trabalhar em conjunto com JavaScript e CSS sobre os quais deseja falar abaixo!
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:
<span style = "font-size: 18px;"> // Obtenha o valor de cor de .Element: 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'); </span>
Você viu isso? 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:
<span style = "font-size: 18px;"> mydiv.classList.add ('mycssclass');
mydiv.classlist.remove ('mycssclass');
mydiv.classlist.toggle ('mycssclass');
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 do elemento.style.propertyName para modificar os estilos. Na verdade, muito simples.
A cópia do código é a seguinte:
<span style = "font-size: 18px;"> 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");
</span>
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.
A cópia do código é a seguinte:
<span style = "font-size: 18px;"> 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
}
}); </span>
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 POINTER-EVENTS DO EVENTO DE POINTE DE CSS é muito interessante , é proibido de qualquer evento JavaScript ou funções de retorno de chamada nesse elemento!
A cópia do código é a seguinte:
<span style = "font-size: 18px;">
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.
Esses são os 5 métodos para interagir com o CSS e o JavaScript que você pode ainda não ter descoberto. Você tem novas descobertas? Compartilhe!