Get flex-shrink value through Javascript

[codeispoetry]

var SectionArticle = document.querySelector("article.commonclass");
console.log(SectionArticle.style.flexShrink.value);

Above is giving undefined. Is my expectation to get the flex-shrink value of a class through Javascript unrealistic or there is some hope?

I was trying to fetch the flex-shrink value.

article.commonclass {
	flex: 0 0 30%;
	margin-top: 30px;
	margin-bottom: 30px;
	transition: transform 0.5s;
	border: 2px solid red;
}

[Martyr2]

Try using the getComputedStyle() function for getting the individual styles of a class.

var SectionArticle = document.querySelector("article.commonclass");
console.log(getComputedStyle(SectionArticle).flex);

Notice here that we are getting the computed style of the element and then calling flex property on it (since that is what you have defined). Now of course if you want just the shrink value of that, you will have to define the style individually or parse out the value from your flex property.

[codeispoetry]

Is it possible that when we have different media query, then only whose media query is now active = viewport, onlt that flex property be fetched?

at max-width 900px →

article.commonclass {
	flex: 0 0 25%;
	margin-top: 30px;
	margin-bottom: 30px;
	transition: transform 0.5s;
	border: 2px solid red;
}

at max-width 700px →

article.commonclass {
	flex: 0 0 20%;
	margin-top: 30px;
	margin-bottom: 30px;
	transition: transform 0.5s;
	border: 2px solid red;
}

For examples ↑

[Martyr2]

I don’t see why not. As long as they are showing up in the computed styles pane of the browser and the JS is executed at the time the class is being applied to the element.

[codeispoetry]

Hi There, Inside an SVG I have this →

style="fill: rgb(230, 230, 230)

What will be the best way to Pick UP and alter this? Mainly in the current circumstance, I have to change color?

<rect x="12" y="9" width="200" height="6" style="fill: rgb(230, 230, 230);"></rect>
<circle cx="12" cy="12" r="12" width="12" height="6" style="fill: rgb(237, 40, 70);"></circle>