Is there a way to dynamically change a CSS value?-CodePudding

I have an svg placed in a div, carefully placed

And using this for placement:

.waves-background{
  position:absolute;
  bottom:-45vw;
  left:-40px;
  transform: translateY(-50%);
  z-index:-500;
}

But if I change the window size

Is there something that could save me so many media queries as to say "from this window width each "x" pixels change "x"vw from the bottom value of this class"? (I need the page to be responsive and am using bootstrap 5)

CodePudding user response：

I'm not quite sure if I understand the question, but in CSS there is a function called calc(). Usage here would for example be: width:calc(100vw - 45px);

Other than that javascript can do pretty much anything. Target the element using document.getElementById("yourElementId").style.width = "100px"; (here you can dynamically get other values using js like height and width of the client).

CodePudding user response：

You can use vmin. Take a look at this documentation on different units in CSS