Показать сообщение отдельно
  #2 (permalink)  
Старый 21.04.2020, 02:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Rudman,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text format</title>
</head>
<body>
    <form onsubmit="fChange(event,this)">
    <h3>Введите текст и выберите стиль</h3>
    <div class="continer">
        <label><input type="checkbox" value="font-weight:bold;">Bold</label>
        <label><input type="checkbox" value="text-decoration:underline;">Underline</label>
        <label><input type="checkbox" value="font-style:italic;">Italic</label>
        <label><input type="radio" name="pos" value="text-align:left;">Left</label>
        <label><input type="radio" name="pos" value="text-align:right;">Right</label>
        <label><input type="radio" name="pos" value="text-align:justify">Justify</label>
        <textarea cols="30" rows="10" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi aut, eaque, vitae assumenda, pariatur illo modi ipsam quis totam, itaque. Distinctio modi illum, consectetur quam labore incidunt dicta adipisci?</textarea>

        <button>apply the settings</button>
        <hr style="margin-top: 10px;">
    </div>
    </form>
    <script>
    function fChange(event,form){
    event.preventDefault();
    let property = "";
    form.querySelectorAll(":checked").forEach(({value}) => property +=value);
    text.style.cssText = property;
    }

    </script>
</body>
</html>
Ответить с цитированием