4

Existe alguma forma de obter a lista de todo CSS aplicado a um elemento por JavaScript?

Exemplo:

Digamos que eu tenho o seguinte elemento HTML:

<div id="mega">Content</div>

Tenho também o CSS:

#mega {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

Se eu quisesse tomar uma decisão baseada no CSS que está no elemento com o id="mega" para mudar ou não, é possível pegar essa lista de CSS que foi aplicada ao elemento por JavaScript?

8
  • 3
    Podes usar o window.getComputedStyle(el), é isso que procuras?
    – Sergio
    3/11/2017 às 12:12
  • Isso não será um problema XY ? Pode dar um exemplo do que está efetivamente a tentar fazer ?
    – Isac
    3/11/2017 às 12:16
  • @Isac, nesse caso eu realmente queria saber se tem como obter esses dados do CSS por JavaScript porque sabendo o formato de retorno sei o que preciso verificar, mas anteriormente eu queria tomar a decisão se um elemento já estava com o display: block para colocar o display: none acabei percebendo que quando estava fazendo isso o retorno da verificação era undefined, contornei o problema na época, mas aceito indicação de leitura, caso tenha algo a compartilhar. 3/11/2017 às 13:56
  • 1
    Sim, de facto depende um pouco de como foi definido para saber como utilizar. Se foi definido apenas no CSS e não foi aplicado inline no style ou pelo JS tem de facto de usar computedStyle, mas continua a ser +- direto: if (getComputedStyle(el).display == "block") {. E apenas no if precisa do computed, depois a troca de display seria no style.display na mesma.
    – Isac
    3/11/2017 às 14:41
  • 1
    Só para ajudar um pouco mais pode até tornar isso tudo num ternário, assim: el.style.display = (getComputedStyle(el).display == "block") ? "none":"block";
    – Isac
    3/11/2017 às 14:57

2 Respostas 2

4

Podes usar o window.getComputedStyle(el), isso vai dar algo semelhante a um objeto onde podes ler as suas propriedades para saber quais os estilos aplicados. Ele é bem grande, pois refere todas as propriedades, mas ficas com a informação que procuras...

Podes usar assim:

var backgroundColor = window.getComputedStyle(el).backgroundColor;

Exemplo:

var p = document.querySelector('p');
var styles = window.getComputedStyle(p);
console.log('Cor de fundo:', styles.backgroundColor);

// para teres tudo podes fazer assim:
var css = Object.keys(styles).reduce(
  (obj, prop) => (prop.match(/\D/) && (obj[prop] = styles[prop]), obj), {}
);
console.log(css);
p {
  background-color: green;
  padding: 10px;
}
<p style="color: blue;">Teste</p>

Isso irá gerar algo assim:

{
  "alignContent": "normal",
  "alignItems": "normal",
  "alignSelf": "auto",
  "alignmentBaseline": "auto",
  "all": "",
  "animation": "none 0s ease 0s 1 normal none running",
  "animationDelay": "0s",
  "animationDirection": "normal",
  "animationDuration": "0s",
  "animationFillMode": "none",
  "animationIterationCount": "1",
  "animationName": "none",
  "animationPlayState": "running",
  "animationTimingFunction": "ease",
  "backfaceVisibility": "visible",
  "background": "rgb(0, 128, 0) none repeat scroll 0% 0% / auto padding-box border-box",
  "backgroundAttachment": "scroll",
  "backgroundBlendMode": "normal",
  "backgroundClip": "border-box",
  "backgroundColor": "rgb(0, 128, 0)",
  "backgroundImage": "none",
  "backgroundOrigin": "padding-box",
  "backgroundPosition": "0% 0%",
  "backgroundPositionX": "0%",
  "backgroundPositionY": "0%",
  "backgroundRepeat": "repeat",
  "backgroundRepeatX": "",
  "backgroundRepeatY": "",
  "backgroundSize": "auto",
  "baselineShift": "0px",
  "blockSize": "-20px",
  "border": "0px none rgb(0, 0, 255)",
  "borderBottom": "0px none rgb(0, 0, 255)",
  "borderBottomColor": "rgb(0, 0, 255)",
  "borderBottomLeftRadius": "0px",
  "borderBottomRightRadius": "0px",
  "borderBottomStyle": "none",
  "borderBottomWidth": "0px",
  "borderCollapse": "separate",
  "borderColor": "rgb(0, 0, 255)",
  "borderImage": "none",
  etc...
1

Você pode usar o getComputedStyle. Ex:

function ObterCSS(element){
  var css = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    css+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return css;
}
1
  • Gostei do retorno que essa função dá. Obrigado. 3/11/2017 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .