26.12.2024

JavaScript: Como Ler Valores de Regras CSS por Classe?

Resposta Rápida

Para obter valores de estilo CSS calculados, use a função getComputedStyle():

let style = getComputedStyle(document.querySelector('.exemplo'));
console.log(style.color); // Exibe a cor atual do elemento

Mas e se você precisar se aprofundar e examinar todas as propriedades de um seletor específico? Vamos embarcar em uma jornada emocionante pelo mundo do CSS.

Explorando as Profundezas do CSS com document.styleSheets

Para descobrir os estilos aplicados a um seletor específico em todas as folhas de estilo, você pode usar o seguinte método:

function getCssRulesBySelector(selector) {
  let results = []; // Aqui iremos reunir nossas "descobertas"

  // Iterando por todas as folhas de estilo
  for (const sheet of document.styleSheets) {
    const rules = sheet.rules || sheet.cssRules; // Levando em conta as diferenças entre navegadores

    // Iterando por todas as regras em cada folha de estilo
    for (const rule of rules) {  
      if (rule.selectorText === selector) {
        // Encontramos a regra CSS desejada
        results.push(rule.style.cssText || rule.cssText);
      }
    }
  }
  // Coletando todas as regras encontradas em uma única string e retornando-a  
  return results.join(' ');
}

Esse método coleta e retorna todas as regras CSS correspondentes ao seletor especificado como uma string.

Tratando Pseudo-Classes e Consultas de Mídia

Estamos prontos para a ação! Se encontrarmos pseudo-classes e consultas de mídia, nosso método pode lidar com isso:

function getCssRulesBySelector(selector, includeMediaQueries = false) {
  let results = [];
  // ...
      if (rule.selectorText === selector) {
        results.push(rule.style.cssText || rule.cssText);
      } else if (includeMediaQueries && rule.conditionText) {
        rule.cssRules && Array.from(rule.cssRules)
          .forEach(innerRule => {
            if (innerRule.selectorText === selector) {
              results.push(innerRule.style.cssText || innerRule.cssText);
            }
          });
      }
  // ...
}

Visualização

Pesquisar por valores de regras CSS é como navegar em um submarino:

getComputedStyle(element).getPropertyValue('--minha-propriedade-personalizada');

Lembre-se, isso é como um sinal de sonar que ajuda você a encontrar o que precisa:

Seus Estilos:	Seletor	Propriedade	Valor
.minha-classe	--minha-propriedade	'azul' 🎉

Resultado: 'azul' // Valor encontrado 🎉

**Os tesouros CSS** já foram revelados a você; agora você pode começar a extrair os valores que precisa!

### Estilos Calculados e Declarados: O Mundo Subaquático das Contradições CSS

É importante distinguir entre os valores **calculados** e **declarados**. `getComputedStyle()` fornece o **valor real** que resulta de todas as transformações e heranças CSS:

- Pode diferir do que você especificou nos estilos se influenciado por outras regras.
- Não exibe valores que não fazem sentido para o elemento (por exemplo, `width` para um elemento inline).

Por outro lado, `document.styleSheets` reflete os *valores declarados*:

- Eles representam o que você originalmente escreveu no CSS.
- Não incluem substituições específicas e estilos de navegador.

### Propriedades Personalizadas: O Código Pirata do CSS

Se sua tarefa é **ler variáveis CSS** (propriedades personalizadas), então `getComputedStyle()` também será útil:

```javascript
let rootStyle = getComputedStyle(document.documentElement);
console.log(rootStyle.getPropertyValue('--minha-variavel'));  // 🎁 Revela o valor necessário!

O Labirinto da Especificidade

A especificidade do CSS pode ser confusa ao encontrar estilos inesperados:

• Estilos inline têm a máxima especificidade, como um passe VIP.
• !important é uma maneira agressiva, mas eficaz, de sobrescrever estilos.
• JavaScript tem a capacidade de modificar estilos em tempo real, como mágica!

Pesquisar e testar seu CSS são as melhores ferramentas para compreender e controlar os estilos.

Recursos Úteis

1. Window.getComputedStyle() - Web APIs | MDN
2. Objeto CSSStyleDeclaration
3. Selecionando e manipulando pseudo-elementos CSS com JavaScript - Stack Overflow
4. Atualizando uma variável CSS usando JavaScript | CSS-Tricks
5. Document.styleSheets - Web APIs | MDN
6. Usando Variáveis CSS (Propriedades Personalizadas) - CSS: Folhas de Estilo em Cascata | MDN
7. Estilos e Classes

Video

Navigation