0

Estou tentando criar um bloco vermelho na página usando HTML, mas por algum motivo o código não funciona. O console do navegador não retorna nenhum erro e nada acontece em tela. O programa está assim:

function criar(){
    let box = document.querySelector('.box');
    box.style.width = 100;
    box.style.height = 100;
    box.style.background = '#f00';
    box.style.color = '#f00';
}
<button onclick="criar()">Criar Quadrado</button>
   
<div class="box">

</div>

Alguém sabe como resolver?

2 Respostas 2

2

Faltava vc definir a unidade de medida do width e do heigh

function criar(){
    let box = document.querySelector('.box');
    box.style.width = '100px';
    box.style.height = '100px';
    box.style.background = '#f00';
    box.style.color = '#f00';
}
<button onclick="criar()">Criar Quadrado</button>
   
<div class="box">

</div>

2
  • Ah sim, claro. Vi um tutorial onde não se utilizava a unidade. Obrigado!. 15/11/2019 às 17:51
  • 1
    Fico feliz em ter ajudado 😄👍 Se possível... marque a resposta como válida... me ajuda, e ajuda a comunidade 😄😄 15/11/2019 às 17:54
0

Inicialmente o seu problema é a falta de definição da unidade nas medidas de width e height, além disso, se você realmente quer criar elementos e não apenas estilizar algum existente previamente no DOM, você pode fazer criando ele via javascript e depois colocando ele em qualquer lugar do DOM que você quiser como nesse exemplo:

function criarQuadrado(cor = '#000') {
  const quadrado = document.createElement('div');
  quadrado.style.width = '64px';
  quadrado.style.height = '64px';
  quadrado.style.margin = '8px';
  quadrado.style.backgroundColor = cor;
  document.querySelector('#resultado').appendChild(quadrado);
}
#resultado {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;

  max-width: 512px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button onClick="criarQuadrado('blue')">Criar Quadrado Azul</button>
  <button onClick="criarQuadrado('red')">Criar Quadrado Vermelho</button>
  <button onClick="criarQuadrado('green')">Criar Quadrado Verde</button>
  <div id="resultado"></div>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .