0

disclaimer: (solved): i simply forgot an attribute, as pointed out here https://stackoverflow.com/a/65531072/14824067 .

Original question:

I wrote a much bigger code but for testing purposes I broke it down to a test code. Maybe it's a very small mistake -but I can't find it.

Do you see what I am missing?

WHAT I WANT TO DO: Set the top and bottom gap via js - it should work- I did it before - I only have to calculate it in the big program - and hence I use % and use the css "calc"-function

The test code is as follows:

       <!doctype html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>test</title>
            </head>
        
            <body>
                
                <p id="hi">hey</p>
                
                
            </body>
                    <script>
                        document.getElementById('hi').style.display= "block";
                        document.getElementById('hi').style.bottom= "calc( 50% "+" + "+" 20% )";
                        document.getElementById('hi').style.left=   "calc( 50% "+" + "+" 20% )";
                    </script>
        </html>
LuckyLuke Skywalker
  • 610
  • 2
  • 5
  • 17

2 Answers2

1

I'm not clear why you don't want to use css.

The rules you create with js can only work with position: absolute as an option. Add this line of js code to set absolute positioning:

document.getElementById('hi').style.position = "absolute";


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
<body>
  <p id="hi">hey</p>
</body>
  <script>
  document.getElementById('hi').style.display = "block";
  document.getElementById('hi').style.bottom = "calc( 50% "+" + "+" 20% )";
  document.getElementById('hi').style.left = "calc( 50% "+" + "+" 20% )";
  document.getElementById('hi').style.position = "absolute";
  </script>
</html>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
0

I replaced left with marginLeft and combined the strings and the code seems to work fine.

document.getElementById('hi').style.marginLeft= " calc(50% + 20%) ";

DumbCoder7
  • 255
  • 1
  • 8