Como obter um atributo de estilo de uma classe CSS por javascript / jQuery?

robsonrosa :

Como posso acessar uma propriedade de uma classe CSS por jQuery? Eu tenho uma classe CSS como:

.highlight { 
    color: red; 
}

E eu preciso fazer uma animação colorida em um objeto:

$(this).animate({
    color: [color of highlight class]
}, 750);

Para que eu possa mudar de redpara blue(no CSS) e minha animação funcione de acordo com o meu CSS.

Uma abordagem seria colocar um elemento invisível na highlightclasse e obter a cor do elemento para usar na animação, mas acho que essa é uma prática muito, muito ruim.

Alguma sugestão?

rlemon:

Escrevi uma pequena função que percorre as folhas de estilo no documento procurando o seletor correspondente e o estilo.

Há uma ressalva, isso funcionará apenas para folhas de estilo definidas com uma marca de estilo ou folhas externas do mesmo domínio.

Se a planilha for conhecida, você poderá passá-la e evitar que você procure várias planilhas (mais rápido e se você tiver regras em colisão, é mais exato).

Eu testei apenas no jsFiddle com alguns casos de teste fracos, deixe-me saber se isso funciona para você.

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                return rule.style[style];
            }
        }
    }
    return null;
}

exemplo de uso:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); 

editar:

Esqueci de levar em consideração as regras agrupadas. Eu mudei a seleção do seletor para isso:

if (rule.selectorText.split(',').indexOf(selector) !== -1) {

agora ele verificará se algum dos seletores de uma regra agrupada corresponde.

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

JavaFx: como obter a folha de estilo correspondente para uma determinada classe de estilo de um nó?

Como obter um atributo de elemento por jquery

Por que obter o atributo de estilo de um elemento de nó retorna false em javascript?

Como substituir o estilo CSS de uma classe usando jquery?

Como obter um estilo CSS personalizado por Javascript?

Como obter uma classe importada para alterar o atributo da folha de estilo do rótulo main.py

Como colocar a variável javascript como um atributo de estilo css em html?

Como adicionar uma classe css dinâmica dentro de um atributo de classe html no angularjs?

Como obter a classe de um atributo de objeto estático

Como obter um determinado atributo de uma classe com diversos atributos

Python: como obter um atributo não inicializado de uma classe para outra

Como obter o atributo de classe Python por valor?

Obter um atributo de uma classe filha - isso é possível?

Como aplicar corretamente um estilo CSS a todas as imagens em um div de uma classe específica?

Como aplicar corretamente um estilo CSS a todas as imagens em um div de uma classe específica?

Como obter o atributo de classe de um <span> dentro de um <li> por id do elemento <li>

obter estilo de css, JavaScript

Como alterar dinamicamente o estilo de css de uma classe?

Como obter o nome de um atributo de uma entidade

Como mudar o estilo de uma classe css através de Javascript?

Como obter o valor de um atributo personalizado dentro de uma tag <option> usando JAVASCRIPT

Como obter o valor de um objeto de classe por meio de uma string?

Como obter a classe de um objeto JavaScript?

Por que eu usaria uma classe em vez de um atributo em HTML e CSS?

Usando uma variável como um atributo de uma classe

Como posso obter uma classe de um objeto de linha de tabela de dados jQuery?

Como posso atualizar o atributo de estilo de um elemento html virtual com o valor de uma variável JavaScript?

Como obter o estilo embutido de um css var personalizado com javascript

C # como obter um atributo de objeto por string?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  3. 3

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  4. 4

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  5. 5

    Gerenciar recurso shake de Windows Aero com barra de título personalizado

  6. 6

    Como obter dados API adequados para o aplicativo angular?

  7. 7

    UITextView não está exibindo texto longo

  8. 8

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  9. 9

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  10. 10

    Usando o plug-in Platform.js do Google

  11. 11

    Como posso modificar esse algoritmo de linha de visada para aceitar raios que passam pelos cantos?

  12. 12

    Dependência circular de diálogo personalizado

  13. 13

    Coloque uma caixa de texto HTML em uma imagem em uma posição fixa para site para desktop e celular

  14. 14

    iOS: como adicionar sombra projetada e sombra de traço no UIView?

  15. 15

    Como usar a caixa de diálogo de seleção de nomes com VBA para enviar e-mail para mais de um destinatário?

  16. 16

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  17. 17

    How to create dynamic navigation menu select from database using Codeigniter?

  18. 18

    Converter valores de linha SQL em colunas

  19. 19

    ChartJS, várias linhas no rótulo do gráfico de barras

  20. 20

    用@StyleableRes注释的getStyledAttributes。禁止警告

  21. 21

    não é possível adicionar dependência para com.google.android.gms.tasks.OnSuccessListener

quentelabel

Arquivo