Get CSS by Javascript

Asked

Viewed 1,323 times

3

Is there any way to get the list at all CSS applied to an element by Javascript?

Example:

Let’s say I have the following element HTML:

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

I also have the CSS:

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

If I wanted to make a decision based on CSS that is in the element with the id="mega" to change or not, it is possible to pick up this list of CSS which has been applied to the item by Javascript?

javascript jquery css
  • 3

    You can use the window.getComputedStyle(el), that’s what you’re looking for?

  • Isn’t that an XY problem? You can give an example of what you are actually trying to do ?

  • @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 the display: none I ended up realizing that when I was doing this the return of the check was undefined, I made the problem at the time, but I accept reading indication if you have something to share.

  • 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 with if (el.style.display == "block") {. That’s exactly what led me to ask if it wouldn’t be an XY problem

  • @Isac, but in this case the el.style.display == "block" will always give false because unless the attribute has been set by Javascript this condition does not access the attribute defined in the CSS file. Try console.log(el.style.display) defining the display: block in the CSS.

  • 1

    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 use computedStyle, but continues to be +- direct: if (getComputedStyle(el).display == "block") {. And only in the if need the computed, then the display change would be in the style.display in the same.

  • @Isac, that’s right! That’s why it was good to know about this function in general! Thank you.

  • 1

    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";

Show 3 more comments

2 answers

3


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...

1

You can use the 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;
}

  • I liked the feedback that this function gives. Thank you.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.