object.style.flexShrink = "value";
<'flex-shrink'> = <number [0,∞]>
<number [0,∞]>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a positive sign (+). The last character may be succeeded by an exponent (e or E) and an integer.
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
flex-basis: 25%;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, yellow);
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">0</button>
<button onmouseover="myfunction(innerHTML)">1</button>
<button onmouseover="myfunction(innerHTML)">2</button>
<button onmouseover="myfunction(innerHTML)">3</button>
<button onmouseover="myfunction(innerHTML)">4</button>
<div class="myclass">
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass > div").style.flexShrink = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
flex-basis: 25%;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, yellow);
}
</style>
</head>
<body>
<button>initial</button>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div class="myclass">
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
<div>flex-shrink</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass > div").style.flexShrink = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>