Показать сообщение отдельно
  #4 (permalink)  
Старый 14.06.2019, 10:39
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от 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>
Ответить с цитированием