Problem with basic javascript

Asked

Viewed 40 times

-2

Good evening, I have a problem, because the next code does not work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="box"></div>
    </div>

    <script>
        var boxElement = document.querySelector('.box');

        boxElement.style.width = 100;
        boxElement.style.height = 100;
        boxElement.style.backgroundColor = '#f00';

    </script>
</body>
</html>

It was supposed to give a result like this: inserir a descrição da imagem aqui

But nothing shows up: inserir a descrição da imagem aqui

The console reports nothing, no errors. And it seems to be all right.

javascript html css

1 answer

4

You need to set the value measure (PX, PT...)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="box"></div>
    </div>

    <script>
        var boxElement = document.querySelector('.box');

        boxElement.style.width = '100px';
        boxElement.style.height = '100px';
        boxElement.style.backgroundColor = '#f00';

    </script>
</body>
</html>

  • It was the first thing I tried. I heard that in this case n need return measure,but still tried with px and n was.

  • 1

    had put single quotes?

  • No, good, so it was. ?

  • 1

    Because you might have seen jss (pre-css processor) tutorial or something of the genre, and not js, maybe if you shared more information from where you saw it, we could give a more objective answer to the pq so it didn’t work

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.