Сообщение от Ruslantech
|
|
но применяется только один и последний по выбору.
|
Так вы задаёте стиль text.style.cssText = this.value
Собственно стиль назначается из value инпута на котором прошло событие.
Вариант через цикл forEach:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript</title>
<style>
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<input type="checkbox" value="text-decoration:line-through;"><span>перечеркнуть</span>
<input type="checkbox" value="font-weight:bold;"><span>сделать жирным</span>
<input type="checkbox" value="color:red;"><span>сделать красным</span>
<script>
let text = document.querySelector('p'),
inputs = document.querySelectorAll('input');
function textStyle() {
let stl = '';
inputs.forEach(el => el.checked ? stl += el.value : 0);
text.style.cssText = stl;
}
inputs.forEach(el => el.addEventListener('input', textStyle));
</script>
</body>
</html>