Para facilitar as consultas no futuro, li algumas informações e resumi os seguintes métodos. É limitado apenas ao JS nativo. Se houver algum lugar errado, aponte isso! Só espero que todos fiquem bem depois de lê -lo!
1. Você pode ler e escrever o estilo CSS dos elementos do documento através do objeto de estilo do objeto DOM Node (ou seja, o objeto CSSStyleDECLARATION).
Por exemplo: var elm = document.getElementById ('teste');
elm.style.color = 'preto';
2. Leia diretamente e escreva atributos do estilo através do getAttribute (), setAttribute () e removeattribute () do objeto elemento
Por exemplo: Elm.SetAttribute ('estilo', 'cor: vermelho; altura da linha: 30px');
3. Através da propriedade CSSTEXT do objeto CSSSSTYLEDECLARATIO
como:
elm.style.csStext = 'cor: vermelho; altura da linha: 30px'; elm.style.removeProperty ('cor'); elm.style.setProperty ('cor', 'verde', 'importante'); elm.style.csstext = ''; // Limpe rapidamente todas as declarações desta regraA parte da declaração de estilo de cada regra CSS (a parte dentro dos aparelhos) é um objeto CSSSTYLEDECLARATION, suas propriedades e métodos:
propriedade:
1.CSSTEXT: Todo o texto da declaração de estilo da regra atual. Esta propriedade pode ser lida e gravada e pode ser usada para definir a regra atual.
2. comprimento: quantas declarações a regra atual contém?
3.parentrule: a regra que contém a regra atual, a propriedade ParentRule da mesma interface CSSRULE.
método:
1. O método getPropertyPriority () retorna a prioridade especificada. Se houver, é "importante", caso contrário, é uma string vazia;
2. O método getPropertyValue retorna o valor declarado especificado;
3. O método do item (índice) retorna o nome do atributo da posição especificado e geralmente é mais direto usando a sintaxe [índice];
4. O método RemoverProperty é usado para excluir uma propriedade CSS e retornar o valor excluído;
5. O método do SetProperty é usado para definir o atributo CSS especificado e não há valor de retorno;
4. Use o atributo Document.Stylesheets para retornar todos os objetos da folha de estilo (ou seja, todas as folhas de estilo) na página atual. É um objeto de matriz de classe somente leitura e seu elemento é um objeto CSSSTYLESHEET (herdado do objeto STILELESHET). Os métodos de propriedade deste objeto são os seguintes:
propriedade:
1. Objeto de matriz de classe CSSRULES, os elementos são regras CSS, objetos CSStylerule na folha de estilo; IE9 são as seguintes regras;
2. O atributo desativado é usado para abrir ou fechar uma folha de estilo com um valor de verdadeiro ou desativado;
3. A propriedade OwnOnode retorna o nó DOM, onde o objeto da folha de estilo está localizado, geralmente <Link> ou <yoy>. Para as folhas de estilo referenciadas por outras folhas de estilo, esta propriedade é nula;
4. Como o comando @import do CSS permite que outras folhas de estilo sejam carregadas na folha de estilo, a propriedade ParentStylesheet possui a propriedade ParentStylesheet, que retorna a folha de estilo que inclui a folha de estilo atual. Se a folha de estilo atual for uma folha de estilo de nível superior, a propriedade retornará NULL;
5. O atributo de tipo retorna o valor do tipo do objeto da folha de estilo, geralmente texto/css;
6. O atributo do título retorna o valor do título do objeto da folha de estilo;
7. O atributo href é um atributo somente leitura, que retorna o endereço da folha de estilo da conexão do objeto da folha de estilo. Para nós de estilo incorporado, essa propriedade é igual a NULL;
8. O atributo de mídia indica se essa folha de estilo é usada para tela, impressão ou ambos são aplicáveis (todos). Este atributo é somente leitura e o valor padrão é a tela;
Método: DeLeterule () exclui uma regra da folha de estilo, insertrule () insere uma nova regra na folha de estilo e o ie9 é adicionado () e removele ();
como:
document.stylesheets [0] .insertrule ('#teste: hover {color: white;}', 0); document.stylesheets [0] .DeLeterule (0); // Exclua a primeira regra no documento da planilha de estilo. // retorna o documento seletor String.stylesheets [0] .csssrules [1] .csStext; // retorna a sequência de regra, incluindo o documento seletor.stylesheets [0] .cssrules [1] .csStext; // retorna todas as seqüências de declaração de estilo para a regra atual5. Use o método getComputedStyle do objeto de janela. O primeiro parâmetro é o objeto do elemento e o segundo parâmetro pode ser nulo, string vazia ou string pseudo-elemento. Este método retorna um objeto CSStyleleDeclaration somente leitura que representa o estilo de cálculo. Representa as informações de estilo final realmente aplicadas ao elemento especificado, ou seja, o resultado após a superposição de várias regras CSS;
Por exemplo: var color = window.getComputedStyle (Elm, ': antes'). Color;
var color = window.getComputedStyle (elm, ': antes'). getPropertyValue ('color');
Ou: var color = window.getComputedStyle (Elm, nulo) .color;
A diferença entre um objeto CSSSTyleleDeclaration que representa um estilo computado e um objeto CSSSTYLEDECLARATION representando um estilo embutido:
1. As propriedades do estilo de cálculo são somente leitura;
2. Calcule o valor do estilo é um valor absoluto. Unidades relativas, como porcentagens e pontos, serão convertidas em valores absolutos de sequência sufixo 'PX'. O atributo cujo valor é a cor será retornado no formato de "rgb (#,#,#)" ou "rgba (#,#,#,#)";
3. Não calcule os atributos compostos, mas apenas com base nos atributos mais básicos, como não consultar a margem, mas consultar Margintop sozinha, etc.;
4. A propriedade CSSTEXT não é definida no objeto Style;
5. O estilo de cálculo também é enganoso. Ao usá -lo, você precisa prestar atenção ao valor de retorno ao consultar certos atributos. Por exemplo, consultar a família Fonte;
6. O método getComputedStyle não é suportado abaixo do IE9. O objeto de elemento do IE tem o atributo CurrentStyle;
6. Adicione a folha de estilo diretamente
1. Crie uma tag <yoy> para adicionar uma folha de estilo embutida
var style1 = document.createElement ('estilo'); style1.innerhtml = 'corpo {cor: vermelho} #top: hover {background-color: vermelho; cor: branco;}'; document.head.appendChild (style1);2. Outra maneira é adicionar uma folha de estilo externa, ou seja, adicionar um nó de link no documento e apontar o atributo href ao URL da folha de estilo externa
var link1 = document.createElement ('link'); link1.setAttribute ('rel', 'stylesheet'); link1.setAttribute ('type', 'text/css'); link1.setAttribute ('href', 'reset-min.css'); document.head.appendChild (link1);7. O método Window.MatchMedia é usado para verificar a instrução MediaQuery do CSS. As versões mais recentes de vários navegadores (incluindo o IE 10+) suportam esse método. Para navegadores antigos que não suportam esse método, você pode usar a biblioteca de funções de terceiros matchmedia.js;
Aqui está um exemplo da declaração MediaQuery:
@media all e (max-device-width: 700px) {body {background: #ff0;}}O método Window.MatchMedia aceita uma sequência de instrução MediaQuery como um parâmetro e retorna um objeto MediaQueryList. Este objeto tem as duas propriedades a seguir:
Mídia: Retorna a sequência de declaração de consulta MediaQuery.
Matches: Retorna um valor booleano indicando se o ambiente atual corresponde à declaração de consulta.
var resultado = window.matchmedia ('(max-lar: 700px)'); if (result.matches) {console.log ('a largura da página é menor ou igual a 700px'); } else {console.log ('A largura da página é maior que 700px'); }O objeto MediaQueryList retornado pelo método Window.MatchMedia possui dois métodos para ouvir eventos: o método AddListener e o método removelener. Se o resultado da consulta MediaQuery mudar, a função de retorno de chamada especificada será chamada;
var mql = window.matchmedia ("(Max-lar: 700px)"); mql.addlistener (MQCallback); // Especifique a função de retorno de chamada MQCallback (MQCallback); // Função de retorno de chamada MQCallback (MQL) {if (mql.matches) {// largura menor ou igual a 700 pixels} else {// largura maior do que 700 piors {// largura ou igual a 700 pixels} mais {// largura.Referências a este artigo:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript Referência: http://javascript.ruanyifeng.com/dom/css.html
Guia Javascript autoritário Sexta edição
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.