krouzek:animace_2023 [Kroužek Javascriptu]

Toto je starší verze dokumentu!

Výchozí stav: stránka se zobrazeným barevným čtvercem (div)

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Animace 2023</title>
 
    <style>
    #ctverec {
      position: absolute;
      /* rozmery ctverce: sirka(width) a vyska(height) */
      width: 200px;
      height: 200px;
      /* pozice leveho horniho rohu ctverce vuci parent elementu:display: 
       top = jak daleko od horni hrany
       left = jak daleko od leve hrany
       bottom = jak daleko od spodni hrany
       right = jak daleko od prave hrany
       */
      top: 150px;
      left: 200px;
      background-color:green
    }
    </style>
 
    <script>
 
    </script>
</head>
 
<body>
 <div id="ctverec"></div>
</body>
</html>

Úkoly

Vytvořte svůj html soubor, uložte do něj obsah a zobrazte jej v prohlížeči. Měl by vám ukázat zelený čtverec
Změńte barvu čtverce na červenou (red) a někam ve výchozím stavu posuňte, například trochu doprava
V nástrojích pro vývojáře document.getElementById('ctverec').style.top='210px'