JavaScript var to CSS

Question

Hey everyone!
How to get JavaScript var to CSS style?
Example:

<script type="text/javascript">
var width;
width = screen.width;
var clear = (screen.width*0.06/2);
alert(clear);
</script>

CSS:

#d2 {
width: 100;
height: 50px;
background: #FFFFFF;
border-radius: 10px;
margin: left;
margin-left: var(--clear);

Answer 1

I don't think CSS can access JavaScript vars. BUT, you can set CSS styles from JavaScript. For example, here you can do something like

document.getElementById("d2").style.marginLeft = clear + 'px';

You can also declare a var in CSS first and then overwrite it with JS.

Answer 2

Since css variables are defined on :root,
we could use JavaScript function
document.documentElement.style.setProperty
to change css variables from :root selector

https://code.sololearn.com/WIBLJv09syV2/?ref=app