Для создания скрипта, который увеличивает радиус элемента, можно использовать следующий код:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение радиуса элемента</title>
<style>
.element {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
transition: all 0.5s ease;
transform-origin: center;
}
</style>
</head>
<body>
<div class="element"></div>
<script>
document.querySelector('.element').addEventListener('mouseenter', function() {
this.style.transform = `scale(1.5)`;
});
document.querySelector('.element').addEventListener('mouseleave', function() {
this.style.transform = `scale(1)`;
});
</script>
</body>
</html>
```
Чтобы использовать переменную `enlarge_to` из функций `enlarge` и `shrink` в CSS стилях, можно передать значение через атрибут `style` или добавить класс к элементу, который будет изменять CSS стили в зависимости от значения переменной.
Для реализации логики без лишних функций, можно использовать непосредственно метод `addEventListener` для изменения стилей элемента при событии `mouseenter`. Например:
```javascript
document.querySelector('.element').addEventListener('mouseenter', function() {
this.style.transform = `scale(1.5)`;
this.style.transformOrigin = `50% 50%`;
this.style.zIndex = `1`;
});
```
Таким образом, можно реализовать увеличение радиуса элемента и передавать переменные для стилей CSS непосредственно в обработчике события.