Não tem porque utilizar jQuery para isso! :-) Você pode utilizar o método getPropertyValue
, disponível no protótipo de objetos do tipo CSSStyleDeclaration
.
Um exemplo simples:
// Equivalente ao pseudo-seletor `:root` no CSS.
const root = document.documentElement;
// Define uma "variável" na raiz:
root.style.setProperty('--my-var', 'rgb(255, 0, 0)');
// Obtém a "variável":
const result = root.style.getPropertyValue('--my-var');
console.log(result); //=> rgb(255, 0, 0)
O problema é que utilizar getPropertyValue
na CSSStyleDeclaration
retornada pela propriedade style
de qualquer elemento não funcionará para obter as "variávies" definidas pelo CSS, uma vez que a propriedade style
recupera somente os estilos definidos inline no próprio elemento.
Para obter "variáveis" CSS definidas na folha de estilos, você deve utilizar a CSSStyleDeclaration
retornada pelo método getComputedStyle
mediante aplicação com o próprio elemento.
Um exemplo:
// Obtém a raiz:
const root = document.documentElement;
// Obtém os estilos computados para a raiz:
const computedStyles = window.getComputedStyle(root);
// Obtém a "variável":
const result = computedStyles.getPropertyValue('--my-var');
console.log(result); //=> rgb(255, 0, 0)
:root {
--my-var: rgb(255, 0, 0);
}
Como estilos computados herdam regras CSS definidas em qualquer elemento parente, você pode utilizar esse artifício em qualquer elemento descendente do elemento raiz.
No entanto, para facilitar a computação dos estilos, prefira sempre buscar pelo elemento mais próximo àquele que definiu a regra. Neste caso, o próprio :root
.
Em relação ao "observar alterações" automaticamente, não há forma definida para se fazer isso. Uma opção é encapsular a lógica que mostrei acima em uma função e chamá-la sempre que o usuário alterar a resolução.
Você pode fazer esse tipo de invocação mediante emissão do evento resize
, por exemplo.
Esta resposta foi baseada nesta pergunta (e respostas) do SOen.
--limite
é isso?