@asfafveresvr

Надо разобраться c js?

Нужно сделать так, чтобы при нажатии на чекбокс менялся текст, то есть наклонный становился наклонным, а жирный жирным.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>If</title>
    <style>
        body{
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            padding: 50px;
        }
        .settings{
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <p class="text">Привет!</p>
    <div class="settings">
        <p class=".style">Жирный текст</p>
        <input class="bold" type="checkbox" onclick="bold()">
    </div>
    <div class="settings">
        <p class=".style">Наклонный текст</p>
        <input class="italic" type="checkbox" onclick="italic()">
    </div>
    <script>
        function bold() {
            var text = document.querySelector(".text");
            var bold = document.querySelector(".bold");

            if (bold.checked == true){
                text.style.fontWeight = 900;
            } else {
                text.style.fontWeight = 400;
            }
        } 
        function italic() {
            var text = document.querySelector(".text");
            var italic = document.querySelector(".italic");

        if (italic.cheked == true){
    text.style.fontStyle = "italic";
        } else {
    text.style.fontStyle: "normal";
    }
        } 
    </script>
</body>
</html>
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
MaKvc
@MaKvc
Отчаянный веб-разработчик
Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>If</title>
    <style>
        body{
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            padding: 50px;
        }
        .settings{
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <p class="text">Привет!</p>
    <div class="settings">
        <p class="style">Жирный текст</p>
        <input onchange="event.target.checked ? document.querySelector('.style').style.fontWeight = 900 : document.querySelector('.style').style.fontWeight = 400" type="checkbox">
    </div>
    <div class="settings">
        <p class="italic">Наклонный текст</p>
        <input onchange="event.target.checked ? document.querySelector('.italic').style.fontStyle  = 'italic' : document.querySelector('.italic').style.fontStyle  = 'normal'" type="checkbox">
    </div>
</body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Лучше убрать обработчики из разметки и добавлять их из скрипта. В разметке оставил только имя добавляемого класса.
Лучше добавлять/удалять классы, чем напрямую добавлять элементам стили.
Ответ написан
Комментировать
@lolzqq
HTML,CSS,JS,PHP
Решение через добавление/удаление заранее предустановленных в CSS стилей для классов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы