Перейти к содержимому
SHMYGOOL
Главная
Направление
Учебные задания
Новости
Статьи
<div class="circle"></div> <div class="select"> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <label for="size">Circle radius</label> <select id="size"> <option>50px</option> <option>100px</option> <option>150px</option> <option>200px</option> <option>250px</option> </select><br> <label for="color">Circle color</label> <select id="color"> <option>Black</option> <option>Red</option> <option>Yellow</option> <option>Blue</option> <option>Green</option> </select> </div>
function updateCircle() { var radius = $("#size").val(); var color = $("#color").val(); $(".circle").css({ "width": radius, "height": radius, "background-color": color }); } $("#size, #color").change(function() { updateCircle(); }); updateCircle();
.circle { background-color: yellow; width: 50px; height: 50px; border-radius: 50%; position: relative; left: 100px; } label { position: relative; left: 400px; bottom: 80px; } select { position: relative; left: 400px; bottom: 80px; border-radius: 5px; padding: 10px 60px 10px 20px; cursor: pointer; width: 20%; text-align:center; display: table-cell; vertical-align: middle; }
Results:
Circle radius
50px
100px
150px
200px
250px
Circle color
Black
Red
Yellow
Blue
Green