Dilettante_Pro,
в его примере, через "Посмотреть", так же. Не работают репиты и переключение px/cover. Изменения вступают в силу только после изменений позиции (лефт/топ). Cover работает, но тоже барахлит) |
А как такой вариант?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
label,
ul,
p {
margin-bottom: 0;
}
.back_flex ul li {
list-style: none;
display: inline-block;
}
.back_flex {
display: flex;
align-items: center;
margin: 15px 0;
}
.back_flex p {
margin-right: 15px;
}
#backpx {
width: 50px;
}
#back {
width: 267px;
height: 267px;
background-color: rgb(0, 0, 0);
display: flex;
position: relative;
}
</style>
</head>
<body>
<div class='container p-3'>
<div class='row align-items-center'>
<div class='col-lg-6'>
<div class='back_flex'>
<p>background-image:</p>
<ul>
<li>url(<input type='text' id='url' value="https://javascript.ru/cat/list/donkey.gif">);</li>
</ul>
</div>
<div class='back_flex'>
<p>background-repeat:</p>
<ul>
<li><label><input type='radio' name='repeat' id='' checked>no-repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-x</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-y</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-position: </p>
<ul>
<li>Left <label><input id='posX' type='number' min='0' max='100' value="0">%</label></li>
<li>Top <label><input id='posY' type='number' min='0' max='100' value="0">%</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-size: </p>
<ul>
<li><label><input type='number' id='size' value="30">px</label></li>
<li><label><input type='checkbox' id='size2' name='size'>cover</label></li>
</ul>
</div>
</div>
<div class='col-lg-6'>
<div id='back'></div>
</div>
</div>
</div>
<script>
var back = document.querySelector("#back"),
x = document.querySelector("#posX"),
y = document.querySelector('#posY'),
size = document.querySelector('#size'),
size2 = document.querySelector('#size2');
function style() {
back.style.background = `url(${document.querySelector("#url").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
back.style.backgroundSize = size2.checked?'cover':size.value+'px';
};
style();
[].forEach.call(document.querySelectorAll('input'), function(el) { el.onchange=style});
[].forEach.call(document.querySelectorAll('input'), function(el) { el.oninput=style});
</script>
</body>
</html>
|
Dilettante_Pro,
https://my-files.ru/dko70m пришлось на телефон снимать)) |
madeas,
Посмотрел. Очень странно. У меня нормально работает - на все параметры сразу реагирует. Значит, дело не в стрелочных функциях... |
madeas,
Изменил назначение обработчика в пост 12. Посмотрите. |
Dilettante_Pro,
не, ничего не поменялось. Это видимо браузер. Нормально работает лефт/топ и позиция через поле. Радио и чеки нет. Кстати, а как сделать чтобы появилась кнопка "просмотреть" ?) |
madeas, скорее всего событие "input" не срабатывает на радио-баттонах.
Про форматирование на форуме: http://javascript.ru/formatting |
Цитата:
Если только change - не очень динамично работает |
Dilettante_Pro, а почему не так?
[].forEach.call(document.querySelectorAll('input'), function(el) {
el.addEventListener(el.type === 'text' ? 'input' : 'change', style);
});
|
Nexus,
Методом копипасте, по-быстрому:) - для посмотреть Сначала input поменял на change - не очень понравилось, добавил второй:write: |
| Часовой пояс GMT +3, время: 12:25. |