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...
window.getComputedStyle(el)
, é isso que procuras?display: block
para colocar odisplay: none
acabei percebendo que quando estava fazendo isso o retorno da verificação eraundefined
, contornei o problema na época, mas aceito indicação de leitura, caso tenha algo a compartilhar.style
ou pelo JS tem de facto de usarcomputedStyle
, mas continua a ser +- direto:if (getComputedStyle(el).display == "block") {
. E apenas noif
precisa do computed, depois a troca de display seria nostyle.display
na mesma.el.style.display = (getComputedStyle(el).display == "block") ? "none":"block";