You can use the window.getComputedStyle(el)
, this will give something similar to an object where you can read its properties to know which styles are applied. He’s pretty big, 'cause he mentions all the properties, but you get the information you’re looking for...
You can use it like this:
var backgroundColor = window.getComputedStyle(el).backgroundColor;
Example:
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>
It will generate something like this:
{
"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...
You can use the
window.getComputedStyle(el)
, that’s what you’re looking for?– Sergio
Isn’t that an XY problem? You can give an example of what you are actually trying to do ?
– Isac
@Isac, in this case I really wanted to know if you have how to get this CSS data by Javascript because knowing the return format I know what I need to check, but earlier I wanted to make the decision if an element was already with the
display: block
to put thedisplay: none
I ended up realizing that when I was doing this the return of the check wasundefined
, I made the problem at the time, but I accept reading indication if you have something to share.– Laércio Lopes
Yes it always has form, but the most common is to access the attribute you want directly. In the case of
display
for example, the most common will be direct access withif (el.style.display == "block") {
. That’s exactly what led me to ask if it wouldn’t be an XY problem– Isac
@Isac, but in this case the
el.style.display == "block"
will always givefalse
because unless the attribute has been set by Javascript this condition does not access the attribute defined in the CSS file. Tryconsole.log(el.style.display)
defining thedisplay: block
in the CSS.– Laércio Lopes
Yes, it does depend a little on how it was defined to know how to use it. Whether it was defined only in CSS and not applied inline in
style
or by the JS has actually to usecomputedStyle
, but continues to be +- direct:if (getComputedStyle(el).display == "block") {
. And only in theif
need the computed, then the display change would be in thestyle.display
in the same.– Isac
@Isac, that’s right! That’s why it was good to know about this function in general! Thank you.
– Laércio Lopes
Just to help a little bit more can even turn it all into a ternary, like this:
el.style.display = (getComputedStyle(el).display == "block") ? "none":"block";
– Isac