Перейти к содержимому
lifestyle
Главная
Направление
Учебные задания
Новости
Статьи
Искусство
<div class ="circle"></div> <div class= "select"> <h5>circle radius</h5> <select id = "size"> <option>50px</option> <option>100px</option> <option>150px</option> <option>200px</option> <option>250px</option> </select> </div> <div class= "select"> <h5>circle color</h5> <select id = "color"> <option>blueviolet</option> <option>blue</option> <option>red</option> <option>green</option> <option>gray</option> <option>brown</option> </select> </div> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
function updateCircle (){} $("#size").change(function () { let newsize = $(this).val(); $(".circle").css("width", newsize); $(".circle").css("height", newsize); $(".circle").css("border-radius", newsize); }); $("#color").change(function () { var newColor = $(this).val(); $(".circle").css("background-color", newColor); });
.circle { width: 50px; height: 50px; border-radius: 50px; background-color: blueviolet; border-radius: 50px; }
Results:
circle radius
50px
100px
150px
200px
250px
circle color
blueviolet
blue
red
green
gray
brown
footer.php